Skip to content

Instantly share code, notes, and snippets.

@ahmed605
Last active August 9, 2024 03:12
Show Gist options
  • Save ahmed605/4a0f960e6b358157ba3009b17c20fefd to your computer and use it in GitHub Desktop.
Save ahmed605/4a0f960e6b358157ba3009b17c20fefd to your computer and use it in GitHub Desktop.
Composition Expression Language

Composition Expression Language

Important

Composition Expression Language is case-insensitive.

Note

Only functions/operators not in the Microsoft Learn doc have their full signature mentioned here, others are just listed by their name

This gist documents the primitive types, subchannels, keywords, operators, functions, member functions, and animatable properties of the Composition Expression Language used for Composition Expression Animations since the Microsoft Learn documentation is outdated.

Primitive Types

  • bool (aka Boolean) : TypeID: 0x11
  • float (aka Scalar) : TypeID: 0x12
  • Vector2 : TypeID: 0x23
  • Vector3 : TypeID: 0x34
  • Vector4 : TypeID: 0x45
  • Color : TypeID: 0x46
  • Quaternion : TypeID: 0x47
  • Matrix3x2 : TypeID: 0x68
  • Matrix4x4 : TypeID: 0x109
  • TimeSpan : TypeID: 0x2A
  • Path : TypeID: 0x0B

Subchannels

Tip

TypeID can be used to calculate the number of supported subchannels like this numSubchannels = TypeID >> 4, so for example the number of subchannels supported for Matrix4x4 is 0x109 >> 4 which equals 16.

  • Vector2 : X, Y
  • Vector3 : X, Y, Z
  • Vector4 : X, Y, Z, W
  • Matrix3x2 : _11, _12, _21, _22, _31, _32
  • Matrix4x4 : _11, _12, _13, _14, _21, _22, _23, _24, _31, _32, _33, _34, _41, _42, _43, _44

Swizzling

Subchannels support swizzling, so something like this is possible:

var inputSource = ElementCompositionPreview.GetPointerPositionPropertySet(this);
var anim = compositor.CreateExpressionAnimation("source.Position.XXX");
anim.SetReferenceParameter("source", inputSource);

Keywords

  • This
  • This.StartingValue
  • This.CurrentValue
  • This.FinalValue
  • This.Target
  • True
  • False
  • Pi : Constant: 3.1415927f

Operators

  • +
  • -
  • *
  • == : bool(Color,Color), bool(Quaternion,Quaternion), bool(Matrix3x2,Matrix3x2), bool(Matrix4x4,Matrix4x4), bool(Vector4,Vector4), bool(bool,bool), bool(float,float), bool(Vector2,Vector2), bool(Vector3,Vector3)
  • != : bool(Color,Color), bool(Quaternion,Quaternion), bool(Matrix3x2,Matrix3x2), bool(Matrix4x4,Matrix4x4), bool(Vector4,Vector4), bool(bool,bool), bool(float,float), bool(Vector2,Vector2), bool(Vector3,Vector3)
  • > : bool(float,float)
  • >= : bool(float,float)
  • < : bool(float,float)
  • <= : bool(float,float)
  • add
  • subtract
  • divide
  • multiply
  • and : bool(bool,bool)
  • or : bool(bool,bool)
  • not : float(float)
  • ?, :
  • %
  • ||
  • &&

Functions

  • Abs
  • Min
  • Max
  • Clamp
  • Scale
  • Transform
  • Inverse
  • Lerp
  • Slerp
  • ColorLerp
  • ColorLerpHSL
  • ColorLerpRGB
  • Length
  • LengthSquared
  • Distance
  • DistanceSquared
  • Mod
  • Normalize
  • Concatenate
  • Sin
  • Asin
  • Cos
  • Acos
  • Tan
  • Atan
  • Ceil
  • Floor
  • Round
  • Sqrt
  • Pow
  • Square
  • Log10
  • Ln
  • ToDegrees
  • ToRadians
  • Vector2
  • Vector3
  • Vector4
  • ColorHSL
  • Quaternion
  • Matrix3x2
  • Matrix4x4

Member Functions

  • Matrix3x2.CreateFromTranslation
  • Matrix3x2.CreateTranslation
  • Matrix4x4.CreateFromTranslation
  • Matrix4x4.CreateTranslation
  • Matrix3x2.CreateFromScale
  • Matrix3x2.CreateScale
  • Matrix4x4.CreateFromScale
  • Matrix4x4.CreateScale
  • Matrix3x2.CreateSkew
  • Matrix3x2.CreateRotation
  • Matrix4x4.CreateFromAxisAngle
  • Matrix4x4.CreateRotationX : Matrix4x4(float), Matrix4x4(float,Vector3)
  • Matrix4x4.CreateRotationY : Matrix4x4(float), Matrix4x4(float,Vector3)
  • Matrix4x4.CreateRotationZ : Matrix4x4(float), Matrix4x4(float,Vector3)
  • Matrix4x4.CreatePerspective : Matrix4x4(float,float,float,float)
  • Matrix4x4.CreatePerspectiveFieldOfView : Matrix4x4(float,float,float,float)
  • Matrix4x4.CreatePerspectiveOffCenter : Matrix4x4(float,float,float,float,float,float)
  • Matrix4x4.CreateFromQuaternion : Matrix4x4(Quaternion)
  • Matrix4x4.CreateFromYawPitchRoll : Matrix4x4(float,float,float)
  • Quaternion.CreateFromAxisAngle
  • Quaternion.CreateFromRotationMatrix : Quaternion(Matrix4x4)
  • Quaternion.CreateFromYawPitchRoll : Quaternion(float,float,float)
  • Quaternion.Lerp : Quaternion(Quaternion,Quaternion,float)
  • TimeSpan.FromMilliSeconds : TimeSpan(float)
  • TimeSpan.FromSeconds : TimeSpan(float)
  • TimeSpan.FromMinutes : TimeSpan(float)
  • Vector2.Dot : float(Vector2,Vector2)
  • Vector2.Transform : Vector2(Vector2,Quaternion), Vector2(Vector2,Matrix3x2), Vector2(Vector2,Matrix4x4)
  • Vector2.TransformNormal : Vector2(Vector2,Matrix3x2), Vector2(Vector2,Matrix4x4)
  • Vector3.Cross : Vector3(Vector3,Vector3)
  • Vector3.Dot : float(Vector3,Vector3)
  • Vector3.Transform : Vector3(Vector3,Quaternion), Vector3(Vector3,Matrix4x4)
  • Vector3.TransformNormal: Vector3(Vector3,Matrix4x4)
  • Vector4.Dot : float(Vector4,Vector4)
  • Vector4.Transform : Vector4(Vector4,Quaternion), Vector4(Vector4,Matrix4x4), Vector4(Vector3,Quaternion), Vector4(Vector3,Matrix4x4), Vector4(Vector2,Quaternion), Vector4(Vector2,Matrix4x4)

Animatable Properties

Important

Some animatable properties of some types are different than the projected WinRT properties of said types, see RectangleClip for an example of that.

  • ComponentTransform2D

    • AnchorPoint
    • CenterPoint
    • Offset
    • RotationAngle
    • RotationAngleInDegrees
    • Scale
    • TransformMatrix
  • ComponentTransform3D

    • AnchorPoint
    • CenterPoint
    • Offset
    • Orientation
    • RotationAngle
    • RotationAngleInDegrees
    • RotationAxis
    • Scale
    • TransformMatrix
  • Visual [ ComponentTransform3D ]

    • Size
    • Opacity
    • IsPixelSnappingEnabled
    • IsVisible
    • RelativeOffsetAdjustment
    • RelativeSizeAdjustment
  • CompositionColorBrush

    • Color
  • CompositionGradientBrush [ ComponentTransform2D ]

  • CompositionColorGradientStop

    • Color
    • Offset
  • CompositionLinearGradientBrush [ CompositionGradientBrush ]

    • StartPoint
    • EndPoint
  • CompositionRadialGradientBrush [ CompositionGradientBrush ]

    • EllipseCenter
    • EllipseRadius
    • GradientOriginOffset
  • CompositionNineGridBrush

    • BottomInset
    • BottomInsetScale
    • LeftInset
    • LeftInsetScale
    • RightInset
    • RightInsetScale
    • TopInset
    • TopInsetScale
  • CompositionSurfaceBrush [ ComponentTransform2D ]

    • HorizontalAlignmentRatio
    • VerticalAlignmentRatio
    • SnapToPixels
    • SuperDownSample
  • CompositionVisualSurface

    • SourceOffset
    • SourceSize
  • CompositionClip [ ComponentTransform2D ]

  • InsetClip [ CompositionClip ]

    • LeftInset
    • TopInset
    • RightInset
    • BottomInset
  • RectangleClip [ CompositionClip ]

    • Left
    • Top
    • Right
    • Bottom
    • TopLeftRadiusX
    • TopLeftRadiusY
    • TopRightRadiusX
    • TopRightRadiusY
    • BottomLeftRadiusX
    • BottomLeftRadiusY
    • BottomRightRadiusX
    • BottomRightRadiusY
  • CompositionShape [ ComponentTransform2D ]

  • CompositionSpriteShape [ CompositionShape ]

    • StrokeDashOffset
    • StrokeMiterLimit
    • StrokeThickness
  • CompositionGeometry

    • TrimStart
    • TrimEnd
    • TrimOffset
  • CompositionEllipseGeometry [ CompositionGeometry ]

    • Center
    • Radius
  • CompositionLineGeometry [ CompositionGeometry ]

    • Start
    • End
  • CompositionPathGeometry [ CompositionGeometry ]

    • Path
  • CompositionRectangleGeometry [ CompositionGeometry ]

    • Offset
    • Size
  • CompositionRoundedRectangleGeometry [ CompositionGeometry ]

    • CornerRadius
    • Offset
    • Size
  • KeyFrameAnimator

    • DelayTime
    • Duration
    • PlaybackRate
    • Progress
  • KeyFrameAnimation [ KeyFrameAnimator ]

    • StartingValue
    • CurrentValue
  • BounceScalarNaturalMotionAnimation

    • DelayTime
    • InitialValue
    • FinalValue
    • InitialVelocity
    • Acceleration
    • Restitution
  • BounceVector2NaturalMotionAnimation [ BounceScalarNaturalMotionAnimation ]

  • BounceVector3NaturalMotionAnimation [ BounceScalarNaturalMotionAnimation ]

  • SpringScalarNaturalMotionAnimation

    • DelayTime
    • InitialValue
    • FinalValue
    • InitialVelocity
    • DampingRatio
    • Period
  • SpringVector2NaturalMotionAnimation [ SpringScalarNaturalMotionAnimation ]

  • SpringVector3NaturalMotionAnimation [ SpringScalarNaturalMotionAnimation ]

  • AnimationController

    • Progress
    • PlaybackRate
  • CompositionAnimationTriggerPartner

    • Triggered
  • CompositionViewBox

    • Offset
    • Size
    • HorizontalAlignmentRatio
    • VerticalAlignmentRatio
  • DropShadow

    • BlurRadius
    • Color
    • Offset
    • Opacity
  • CompositionProjectedShadow

    • BlurRadiusMultiplier
    • MaxBlurRadius
    • MinBlurRadius
    • OpacityFalloff
    • MaxOpacity
    • MinOpacity
  • ScenePbrMaterial

    • AlphaCutoff
    • EmissiveFactor
    • NormalScale
    • OcclusionStrength
  • SceneModelTransform [ ComponentTransform3D ]

    • Translation
    • Offset
  • SceneMetallicRoughnessMaterial [ ScenePbrMaterial ]

    • BaseColorFactor
    • MetallicFactor
    • RoughnessFactor
  • CompositionManipulation (Read-only1)

    • Injections
    • Scale
    • DeltaScale
    • CenterPoint
    • Position
    • DeltaPosition
    • Matrix
    • PositionVelocity
    • ScaleVelocity
  • CompositionPointerEventRouter (Read-only1)

    • IsPositionXRailsEnabled
    • IsPositionYRailsEnabled
  • VisualInteractionSource [ CompositionManipulation, CompositionPointerEventRouter ]

  • InteractionTracker (Read-only1)

    • Position
    • PositionVelocityInPixelsPerSecond
    • Scale
    • ScaleVelocityInPercentPerSecond
    • MinPosition
    • MaxPosition
    • MinScale
    • MaxScale
    • PositionInertiaDecayRate
    • ScaleInertiaDecayRate
    • InertiaCenterpointX
    • InertiaCenterpointY
    • InertiaModifier_SetX
    • InertiaModifier_SetY
    • InertiaModifier_SetScale
    • InertiaModifier_SetXY
    • NaturalRestingPosition
    • NaturalRestingScale
    • IsPositionRoundingSuggested
    • IsInertiaFromImpulse
  • CompositionHoverPointerSource

    • Point
  • ManipulationTransform

    • Translation
    • Scale
    • CenterPoint
    • Pan
    • Matrix
  • AmbientLight

    • Color
    • Intensity
  • DistantLight

    • Color
    • Direction
    • Intensity
  • PointLight

    • Offset
    • Color
    • ConstantAttenuation
    • LinearAttenuation
    • QuadraticAttenuation
    • Intensity
    • MinAttenuationCutoff
    • MaxAttenuationCutoff
  • SpotLight

    • Direction
    • InnerConeAngle
    • InnerConeAngleInDegrees
    • InnerConeColor
    • InnerConeIntensity
    • Offset
    • OuterConeAngle
    • OuterConeAngleInDegrees
    • OuterConeColor
    • OuterConeIntensity
    • ConstantAttenuation
    • LinearAttenuation
    • QuadraticAttenuation
    • MinAttenuationCutoff
    • MaxAttenuationCutoff
  • CompositionEffectBrush.Properties

    • D2D1 Effects : [EffectName].[PropertyName]2
    • SceneLightingEffect
      • [Name].AmbientAmount
      • [Name].DiffuseAmount
      • [Name].SpecularAmount
      • [Name].SpecularShine
    • WhiteNoiseEffect
      • [Name].Frequency
      • [Name].Offset

Xaml-Specific Animatable Properties

  • ScrollViewerManipulationPropertySet [ ManipulationTransform ]

  • PointerPositionPropertySet

    • Position3
  • UIElement's HandOff Visual [ Visual ]

    • Translation4

Related

Default Keyframe Animation Easing Function

The default Composition keyframe animation easing function is defined like this:

Compositor.CreateCubicBezierEasingFunction(new Vector2(0.41f, 0.52f), new Vector2(0.0f, 0.94f));

Footnotes

  1. Needs confirmation. 2 3

  2. EffectName corresponds to the value of IGraphicsEffect.Name, PropertyName is queried through IGraphicsEffectD2D1Interop::GetNamedPropertyMapping.

  3. This is hooked to CompositionHoverPointerSource.Point through an Expression Animation.

  4. Only if ElementCompositionPreview.SetIsTranslationEnabled is set to true.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment