Анимация элементов XAML с использованием композиций

2025-06-10

В этой статье представлены новые свойства, которые позволяют анимировать XAML UIElement с таким же уровнем производительности, как у анимаций на уровне композиции, и с легкостью настройки свойств XAML.

До Windows 10 версии 1809 у вас было 2 варианта создания анимаций в приложениях UWP:

используйте такие конструкции XAML, как раскадровки анимацийили классы *ThemeTransition и *ThemeAnimationв пространстве имен Windows.UI.Xaml.Media.Animation.
используйте анимации композиции, как описано в Использование визуального слоя с XAML.

Использование визуального слоя обеспечивает лучшую производительность, чем использование конструкций XAML. Но использование ElementCompositionPreview для получения объекта базовой композиции элемента Visual, а затем анимации объекта Visual с помощью композитных анимаций, является более сложным в использовании.

Начиная с Windows 10 версии 1809, можно анимировать свойства в UIElement-ах непосредственно с помощью анимаций композиции без необходимости обращения к базовому визуальному элементу композиции.

Замечание

Чтобы использовать эти свойства в UIElement, целевая версия проекта UWP должна быть 1809 или более поздней. Для получения дополнительной информации о настройке версии проекта см. раздел Приложения с адаптацией под версию.

Примеры

Коллекция WinUI 2
	Если у вас установлено приложение WinUI 2 Gallery, щелкните здесь, чтобы открыть приложение и увидеть взаимодействие анимации в действии. Скачайте приложение WinUI 2 Gallery из Microsoft Store Получить исходный код (GitHub)

Коллекция WinUI 2

Если у вас установлено приложение WinUI 2 Gallery, щелкните здесь, чтобы открыть приложение и увидеть взаимодействие анимации в действии.

Новые свойства отрисовки заменяют старые свойства отрисовки

В этой таблице показаны свойства, которые можно использовать для изменения отрисовки uiElement, которые также можно анимировать с помощью CompositionAnimation.

Недвижимость	Тип	Описание
Непрозрачность	Двойной	Степень непрозрачности объекта
Перевод	Vector3	Переместить элемент по координатам X/Y/Z
Матрица преобразования	Матрица4x4	Матрица преобразования, применяемая к элементу
Масштабировать	Vector3	Отмасштабируйте элемент, центрируя его по центральной точке.
Вращение	Плавать	Поверните элемент вокруг оси вращения и центральной точки.
ОсьВращения	Vector3	Ось поворота
CenterPoint	Vector3	Центральная точка масштабирования и поворота

Значение свойства TransformMatrix объединяется со свойствами Scale, Rotation и Translation в следующем порядке: TransformMatrix, Scale, Rotation, Translation.

Эти свойства не влияют на макет элемента, поэтому изменение этих свойств не вызывает нового Measure/Arrange.

Эти свойства имеют то же назначение и поведение, что и одноимённые свойства в классе Visual композиции (за исключением свойства Translation, которого нет в Visual).

Пример. Задание свойства Scale

В этом примере показано, как задать свойство Scale на кнопке.

<Button Scale="2,2,1" Content="I am a large button" />

var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);

Взаимная эксклюзивность между новыми и старыми свойствами

Замечание

Свойство Opacity не обеспечивает взаимную эксклюзивность, описанную в этом разделе. Вы используете то же свойство Opacity, независимо от того, используете ли вы анимации XAML или анимации композиций.

Свойства, которые можно анимировать с помощью CompositionAnimation, заменяются несколькими существующими свойствами UIElement:

При установке (или анимации) любого из новых свойств нельзя использовать старые свойства. И наоборот, если вы задаете (или анимируйте) любой из старых свойств, нельзя использовать новые свойства.

Вы также не можете использовать новые свойства, если вы используете ElementCompositionPreview для получения и управления визуальным элементом самостоятельно с помощью следующих методов:

Это важно

Попытка смешивания использования двух наборов свойств приведет к сбою вызова API и возникновению сообщения об ошибке.

Можно переключаться с одного набора свойств, очищая их, хотя для простоты это не рекомендуется. Если свойство связано со свойством зависимости (например, UIElement.Projection связано с UIElement.ProjectionProperty), то вызовите ClearValue, чтобы вернуть его в состояние "не используется". В противном случае (например, свойство Scale), задайте для свойства значение по умолчанию.

Анимация свойств UIElement с помощью CompositionAnimation

Вы можете анимировать свойства отрисовки, перечисленные в таблице, с помощью CompositionAnimation. Эти свойства также можно использовать в ExpressionAnimation.

Используйте методы StartAnimation и StopAnimation в UIElement, чтобы анимировать свойства UIElement.

Пример. Анимация свойства Scale с помощью Vector3KeyFrameAnimation

В этом примере показано, как анимировать масштаб кнопки.

var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";

button.StartAnimation(animation);

Пример. Анимация свойства Scale с помощью ExpressionAnimation

На странице есть две кнопки. Вторая кнопка анимируется, становясь вдвое больше (с помощью масштабирования), чем первая кнопка.

<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>

var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);

Поделиться через