0

I have started to use the Windows Composition API in UWP applications to animate elements of the UI.

Visual elements expose RotationAngleInDegrees and RotationAngle properties as well as a RotationAxis property.

When I animate a rectangular object's RotationAngleInDegrees value around the Y axis, the rectangle rotates as I would expect but in a 2D application window, it does not appear to be displaying with a 2.5D projection.

Is there a way to get the 2.5D projection effect on rotations with the composition api?

HoloSheep
  • 53
  • 12

2 Answers2

1

It depends to the effect that you want to have. There is a fluent design app sample on GitHub and here is the link. You will be able to download the demo from the store. And you can get some idea from depth samples. For example, flip to reveal shows a way to rotate a image card and you can find source code from here. For more details please check the sample and the demo.

In general, the animation is to rotate based on X axis:

rectanglevisual.RotationAxis = new System.Numerics.Vector3(1f, 0f, 0f);

And then use rotate animation to rotate based on RotationAngleInDegrees.

It is also possible for you to do this directly on XAML platform by using PlaneProjection from image control.

Barry Wang
  • 1,459
  • 1
  • 8
  • 12
  • Thanks @BarryWang for pointing me to a sample. I was already using an animation based on RotationAngleInDegrees to rotate a card around the Y axis. However by default that rotation does not apply a perspective projection. The secrete seems to be that for the 2.5D projection effect you also need to apply a TransformMatrix to the page. – HoloSheep Mar 07 '19 at 19:50
  • @HoloSheep Exactly. If that effect is what you want, the TransformMatrix is actually the answer. – Barry Wang Mar 08 '19 at 02:13
0

As the sample that @BarryWang pointed me to demonstrates it is necessary to apply a TransformMatrix to the page (or a parenting container) before executing the animation to get the 2.5D effect with rotation or other spatial transformation animations with the composition api.

    private void UpdatePerspective()
    {
        Visual visual = ElementCompositionPreview.GetElementVisual(MainPanel);

        // Get the size of the area we are enabling perspective for
        Vector2 sizeList = new Vector2((float)MainPanel.ActualWidth, (float)MainPanel.ActualHeight);

        // Setup the perspective transform.
        Matrix4x4 perspective = new Matrix4x4(

                    1.0f, 0.0f, 0.0f, 0.0f,

                    0.0f, 1.0f, 0.0f, 0.0f,

                    0.0f, 0.0f, 1.0f, -1.0f / sizeList.X,

                    0.0f, 0.0f, 0.0f, 1.0f);

        // Set the parent transform to apply perspective to all children
        visual.TransformMatrix =

                           Matrix4x4.CreateTranslation(-sizeList.X / 2, -sizeList.Y / 2, 0f) *      // Translate to origin

                           perspective *                                                            // Apply perspective at origin

                           Matrix4x4.CreateTranslation(sizeList.X / 2, sizeList.Y / 2, 0f);         // Translate back to original position
    }
HoloSheep
  • 53
  • 12