本文介绍了新的属性，它们让您在享有合成动画性能的同时，轻松设置 XAML 属性，从而对 XAML UIElement 进行动画处理。
在 Windows 10 版本 1809 之前，有 2 种在 UWP 应用中生成动画的选项：
- 在 XAML 中使用构造，如 Storyboard 动画，或 ThemeTransition 和 ThemeAnimation 类，这些类位于 Windows.UI.Xaml.Media.Animation 命名空间中。
- 如和中所描述的那样使用合成动画，与视觉层结合XAML。
使用视觉层比使用 XAML 构造提供更好的性能。 但是，使用 ElementCompositionPreview 来获取元素的基础合成 Visual 对象，然后用合成动画对该 Visual 对象进行动画处理，使用起来会较为复杂。
从 Windows 10 版本 1809 开始，可以直接使用合成动画对 UIElement 上的属性进行动画处理，而无需获取基础合成视觉对象。
注释
若要在 UIElement 上使用这些属性，UWP 项目目标版本必须为 1809 或更高版本。 有关配置项目版本的详细信息，请参阅 版本自适应应用。
例子
| WinUI 2 画廊 | |
|---|---|
|
如果已安装 WinUI 2 库 应用，请单击此处 打开应用，并在操作查看动画互操作。 |
新的呈现属性替换旧的呈现属性
此表显示可用于修改 UIElement 呈现的属性，这些属性还可以使用 CompositionAnimation进行动画处理。
| 资产 | 类型 | DESCRIPTION |
|---|---|---|
| 不透明度 | 加倍 | 对象的不透明度程度 |
| 翻译 | Vector3 | 移动元素的 X/Y/Z 位置 |
| 变换矩阵 | Matrix4x4 | 要应用于元素的转换矩阵 |
| 比例 | Vector3 | 将元素以中心点 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 还是合成动画，都使用相同的不透明度属性。
可以使用 CompositionAnimation 进行动画处理的属性是多个现有 UIElement 属性的替换项：
设置（或设置动画）任何新属性时，不能使用旧属性。 相反，如果设置（或动画）任何旧属性，则无法使用新属性。
如果您通过这些方法使用 ElementCompositionPreview 自行获取和管理视觉对象，则无法使用新属性：
重要
尝试混合使用这两组属性将导致 API 调用失败并生成错误消息。
可以通过清除属性来从一组属性切换到另一组，但为了简化操作，不建议这样做。 如果属性由 DependencyProperty 提供支持（例如，UIElement.Projection 由 UIElement.ProjectionProperty 提供支持），则调用 ClearValue 将其还原为其“未使用”状态。 否则（例如 Scale 属性）将属性设置为其默认值。
使用 CompositionAnimation 对 UIElement 属性进行动画处理
可以使用 CompositionAnimation 对表格中列出的呈现属性进行动画处理。 这些属性也可以由 ExpressionAnimation引用。
使用 UIElement 上的 StartAnimation 和 StopAnimation 方法对 UIElement 属性进行动画处理。
示例：使用 Vector3KeyFrameAnimation 对 Scale 属性进行动画处理
此示例演示如何对按钮的规模进行动画处理。
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);
