Windows 合成 API 是否支持 2.5D 投影旋转？答案

【问题标题】：Does the Windows Composition API support 2.5D projected rotation?Windows 合成 API 是否支持 2.5D 投影旋转？
【发布时间】：2019-03-06 01:52:57
【问题描述】：

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

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

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

有没有办法使用合成 api 获得旋转的 2.5D 投影效果？

【问题讨论】：

标签： animation uwp rotation windows-composition-api 2.5d

【解决方案1】：

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

一般来说，动画是基于X轴旋转的：

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

然后使用旋转动画根据RotationAngleInDegrees进行旋转。

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

【讨论】：

感谢@BarryWang 为我提供示例。我已经在使用基于 RotationAngleInDegrees 的动画来围绕 Y 轴旋转卡片。但是，默认情况下，旋转不应用透视投影。秘密似乎是，对于 2.5D 投影效果，您还需要将 TransformMatrix 应用于页面。
@HoloSheep 没错。如果该效果是您想要的，那么 TransformMatrix 实际上就是答案。

【解决方案2】：

正如@BarryWang 指向我的示例所演示的，有必要在执行动画之前将TransformMatrix 应用于页面（或父容器），以获得具有旋转的2.5D 效果或使用组合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
    }

【讨论】：

您也应该能够使用 XAML 的 PerspectiveTransform3D 属性 ` .... `
@JohnnyWestlake，太棒了，我没有意识到这是在 Windows 10 XAML 中，或者它也可以与合成 API 结合使用。