Question

我已经开始在UWP应用程序中使用Windows Composition API为UI元素添加动画。

视觉元素公开RotationAngleInDegrees和RotationAngle属性以及RotationAxis属性。

当我围绕Y轴为矩形对象的RotationAngleInDegrees值设置动画时，该矩形将按我期望的那样旋转，但是在2D应用程序窗口中，它似乎没有显示2.5D投影。

是否有一种方法可以使用合成API在旋转时获得2.5D投影效果？

Answer 1

这取决于您想要的效果。 GitHub上有一个流畅的设计应用程序示例，其中here是链接。您将可以从store下载演示。您可以从深度样本中获得一些想法。例如，翻转显示以显示旋转图像卡的方法，您可以从here中找到源代码。有关更多详细信息，请检查示例和演示。

通常，动画将基于X轴旋转：

rectanglevisual.RotationAxis =新的System.Numerics.Vector3（1f，0f，0f）;

然后使用旋转动画基于RotationAngleInDegrees进行旋转。

还可以通过使用图像控件中的PlaneProjection在XAML平台上直接执行此操作。

Answer 2

@BarryWang指出的示例表明，有必要在执行动画之前使用TransformMatrix到页面（或育儿容器）上，以使用合成api获得带有旋转或其他空间变换动画的2.5D效果

    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
    }

Windows Composition API是否支持2.5D投影旋转？

2 个答案: