使用合成动画对 XAML 元素进行动画处理

项目
07/05/2024

本文介绍了一些新属性，这些属性使你可以借助合成动画的性能和 XAML 属性的易设置性对 XAML UIElement 进行动画处理。

在 Windows 10 版本 1809 之前，可通过以下两种方式在 UWP 应用中生成动画：

使用情节提要动画等 XAML 构造，或 Windows.UI.Xaml.Media.Animation 命名空间中的 *ThemeTransition 和 *ThemeAnimation 类。
使用将可视化层与 XAML 结合使用中所述的合成动画。

与使用 XAML 构造相比，使用可视化层可以提供更好的性能。但是，使用 ElementCompositionPreview 获取元素的基础合成 Visual 对象，然后使用合成动画对 Visual 进行动画处理，这种方法更复杂。

从 Windows 10 版本 1809 开始，你可以直接使用合成动画对 UIElement 上的属性进行动画处理，而无需获取基础合成 Visual。

注意

若要在 UIElement 上使用这些属性，UWP 项目目标版本必须为 1809 或更高版本。有关配置项目版本的详细信息，请参阅版本自适应应用。

示例

WinUI 2 库
	如果已安装 WinUI 2 库应用，请单击此处打开该应用并查看动画互操作。获取 WinUI 2 库应用 (Microsoft Store) 获取源代码 (GitHub)

WinUI 2 库

如果已安装 WinUI 2 库应用，请单击此处打开该应用并查看动画互操作。

新呈现属性取代旧呈现属性

此表显示可用于修改 UIElement 呈现的属性，也可以使用 CompositionAnimation 对其进行动画处理。

properties	类型	描述
Opacity	双精度	对象的不透明度
翻译	Vector3	移动元素的 X/Y/Z 位置
TransformMatrix	Matrix4x4	要应用于元素的转换矩阵
缩放	Vector3	缩放元素，居中于 CenterPoint
旋转	浮点	围绕 RotationAxis 和 CenterPoint 旋转元素
RotationAxis	Vector3	旋转轴
CenterPoint	Vector3	缩放和旋转的中心点

TransformMatrix 属性值按以下顺序与 Scale、Rotation 和 Translation 属性组合：TransformMatrix、Scale、Rotation、Translation。

这些属性不会影响元素的布局，因此修改这些属性不会导致新的 Measure/Arrange 传递。

这些属性与合成 Visual 类上的同名属性具有相同的用途和行为（Translation 除外，它不在 Visual 上）。

示例：设置 Scale 属性

本示例演示如何在 Button 上设置 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 属性不强制实施本部分所述的互斥性。无论使用 XAML 还是合成动画，都使用相同的 Opacity 属性。

可使用 CompositionAnimation 进行动画处理的属性可以取代几个现有的 UIElement 属性：

设置（或动画化）任何新属性时，不能使用旧属性。相反，如果设置（或动画化）任何旧属性，则不能使用新属性。

如果使用 ElementCompositionPreview 通过以下方法来获取和管理 Visual，则也无法使用新属性：

重要

尝试混合使用这两组属性将导致 API 调用失败并生成错误消息。

可以通过清除一组属性切换到另一组属性，但为了简单起见，不建议这样做。如果属性由 DependencyProperty 支持（例如，UIElement.Projection 由 UIElement.ProjectionProperty 支持），则调用 ClearValue 将其恢复为“未使用”状态。否则（例如，Scale 属性），将属性设置为其默认值。

使用 CompositionAnimation 对 UIElement 属性进行动画处理

可以使用 CompositionAnimation 对表中列出的呈现属性进行动画处理。 ExpressionAnimation 也可以引用这些属性。

使用 UIElement 上的 StartAnimation 和 StopAnimation 方法对 UIElement 属性进行动画处理。

示例：使用 Vector3KeyFrameAnimation 对 Scale 属性进行动画处理

本示例演示如何对 Button 的缩放进行动画处理。

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);

示例：使用 ExpressionAnimation 对 Scale 属性进行动画处理

一个页面有两个按钮。第二个按钮的动画效果是第一个按钮的两倍大（通过缩放）。

<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);

通过