Skip to content

Instantly share code, notes, and snippets.

@ahmed605

ahmed605/CompositionExpressions.md

Last active April 1, 2024 17:31
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahmed605/4a0f960e6b358157ba3009b17c20fefd to your computer and use it in GitHub Desktop.
Save ahmed605/4a0f960e6b358157ba3009b17c20fefd to your computer and use it in GitHub Desktop.
Download ZIP
Composition Expression Language
Raw
CompositionExpressions.md

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

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

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