Agfdhyk

I'm trying to apply a pointer animation using the Composition Api along with the Expression Builder. I've found a sample of what I need, but the code is imcomplete and I cannot figure out how to get the values for the variables center and distanceToCenter. The original docs and sample are here:

https://docs.microsoft.com/en-us/windows/uwp/composition/pointer-input-animations

Sample code (slightly modified):

using Microsoft.Toolkit.Uwp.UI.Animations.Expressions;

using EF = Microsoft.Toolkit.Uwp.UI.Animations.Expressions.ExpressionFunctions;



_tiltVisual = ElementCompositionPreview.GetElementVisual(element);

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(element);



// || DEFINE THE EXPRESSION FOR THE ROTATION ANGLE ||

var hoverPosition = _pointerPositionPropSet.GetSpecializedReference<PointerPositionPropertySetReferenceNode>().Position;



var angleExpressionNode = EF.Conditional(hoverPosition == new Vector3(0, 0, 0),

    ExpressionValues.CurrentValue.CreateScalarCurrentValue(),

    35 * ((EF.Clamp(EF.Distance(center, hoverPosition), 0, distanceToCenter) % distanceToCenter) / distanceToCenter));



_tiltVisual.StartAnimation("RotationAngleInDegrees", angleExpressionNode);



// || DEFINE THE EXPRESSION FOR THE ROTATION AXIS ||

var axisAngleExpressionNode = EF.Vector3(-(hoverPosition.Y - center.Y) * EF.Conditional(hoverPosition.Y == center.Y, 0, 1),

    (hoverPosition.X - center.X) * EF.Conditional(hoverPosition.X == center.X, 0, 1),

    0);



_tiltVisual.StartAnimation("RotationAxis", axisAngleExpressionNode);

Thanks to Xavier Xie, I found the full code:

    // Grab the backing Visual for the UIElement image

    _tiltVisual = ElementCompositionPreview.GetElementVisual(tiltImage);



    // Set the CenterPoint of the backing Visual, so the rotation axis will defined from the middle

    _tiltVisual.CenterPoint = new Vector3((float)tiltImage.Width / 2, (float)tiltImage.Height / 2, 0f);



    // Grab the PropertySet containing the hover pointer data that will be used to drive the rotations

    // Note: We have a second UIElement we will grab the pointer data against and the other we will animate

    _hoverPositionPropertySet = ElementCompositionPreview.GetPointerPositionPropertySet(HitTestRect);



    // Calculate distance from corner of quadrant to Center

    var center = new Vector3((float)tiltImage.Width / 2, (float)tiltImage.Height / 2, 0);

    var xSquared = Math.Pow(tiltImage.Width / 2, 2);

    var ySquared = Math.Pow(tiltImage.Height / 2, 2);

    var distanceToCenter = (float)Math.Sqrt(xSquared + ySquared);



    // || DEFINE THE EXPRESSION FOR THE ROTATION ANGLE ||             

    // We calculate the Rotation Angle such that it increases from 0 to 35 as the cursor position moves away from the center.

    // Combined with animating the Rotation Axis, the image is "push down" on the point at which the cursor is located.

    // Note: We special case when the hover position is (0,0,0) as this is the starting hover position and and we want the image to be flat (rotationAngle = 0) at startup.             

    var hoverPosition = _hoverPositionPropertySet.GetSpecializedReference<PointerPositionPropertySetReferenceNode>().Position;

    var angleExpressionNode =

        EF.Conditional(

            hoverPosition == new Vector3(0, 0, 0),

            ExpressionValues.CurrentValue.CreateScalarCurrentValue(),

            35 * ((EF.Clamp(EF.Distance(center, hoverPosition), 0, distanceToCenter) % distanceToCenter) / distanceToCenter));



    _tiltVisual.StartAnimation("RotationAngleInDegrees", angleExpressionNode);



    // || DEFINE THE EXPRESSION FOR THE ROTATION AXIS ||             

    // The RotationAxis will be defined as the axis perpendicular to vector position of the hover pointer (vector from center to hover position).

    // The axis is a vector calculated by first converting the pointer position into the coordinate space where the center point (0, 0) is in the middle.

    // The perpendicular axis is then calculated by transposing the cartesian x, y components and negating one (e.g. Vector3(-y,x,0) )

    var axisAngleExpressionNode = EF.Vector3(

        -(hoverPosition.Y - center.Y) * EF.Conditional(hoverPosition.Y == center.Y, 0, 1),

        (hoverPosition.X - center.X) * EF.Conditional(hoverPosition.X == center.X, 0, 1),

        0);



    _tiltVisual.StartAnimation("RotationAxis", axisAngleExpressionNode);