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

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

  • Статья

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

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

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

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

Примечание.

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

Примеры

Коллекция WinUI 2
Коллекция WinUI

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

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

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

Свойство Type Описание
Непрозрачность Двойной Степень непрозрачности объекта
Перевод Vector3 Shift the X/Y/Z position of the element
ПреобразованиеMatrix Matrix4x4 Матрица преобразования, применяемая к элементу
Масштабировать Vector3 Масштабирование элемента в центре ЦентраPoint
Вращение Тип с плавающей запятой Поворот элемента вокруг RotationAxis и CenterPoint
RotationAxis Vector3 Ось поворота
CenterPoint Vector3 Центральная точка масштабирования и поворота

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

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

Эти свойства имеют то же назначение и поведение, что и аналогичные свойства в классе Visual композиции (за исключением перевода, который не используется в 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 и возникновению сообщения об ошибке.

Можно переключаться с одного набора свойств, очищая их, хотя для простоты это не рекомендуется. Если свойство поддерживается зависимостьюProperty (например, UIElement.Проекция поддерживается 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);