Я начал использовать Windows Composition API в приложениях UWP для анимации элементов пользовательского интерфейса.
Визуальные элементы предоставляют свойства RotationAngleInDegrees и RotationAngle, а также свойство RotationAxis.
Когда я анимирую значение RotationAngleInDegrees прямоугольного объекта вокруг оси Y, прямоугольник вращается, как я и ожидал, но в окне 2D-приложения он не отображается с 2,5D-проекцией.
Есть ли способ получить эффект проекции 2.5D при вращении с API композиции?
Это зависит от эффекта, который вы хотите получить. На GitHub есть образец приложения Fluent Design, а здесь — ссылка. Вы сможете загрузить демоверсию из магазина. И вы можете получить некоторое представление из образцов глубины. Например, переверните, чтобы показать, показывает способ поворота карты изображения, и вы можете найти исходный код на здесь. Для получения более подробной информации, пожалуйста, проверьте образец и демо.
В общем случае анимация вращается по оси X:
прямоугольникvisual.RotationAxis = новый System.Numerics.Vector3 (1f, 0f, 0f);
А затем используйте анимацию поворота для поворота на основе RotationAngleInDegrees.
Вы также можете сделать это непосредственно на платформе XAML, используя PlaneProjection из элемента управления изображением.
Как показывает пример, на который мне указал @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
}
