使用組合動畫對 XAML 元素進行動畫處理
本文介紹了一些新屬性，讓您可以透過組合動畫的效果來為 XAML UIElement 製作動畫，並輕鬆設定 XAML 屬性。
在 Windows 10 版本 1809 之前，您可以透過 2 種方法在 UWP 應用程式中建立動畫：
- 使用 XAML 建構，例如 Storyboarded 動畫，或 Windows.UI.Xaml.Media.Animation 命名空間中的 *ThemeTransition 和 *ThemeAnimation 類別。
- 使用組合動畫，如將視覺層與 XAML 搭配使用中所述。
使用視覺層的效能比使用 XAML 建構更好。 但使用 ElementCompositionPreview 取得元素的底層合成 Visual 對象，然後使用合成動畫對 Visual 進行動畫處理，使用起來比較複雜。
從 Windows 10 版本 1809 開始，可以直接使用合成動畫對 UIElement 上的屬性進行動畫處理，而無需取得基礎組合 Visual。
注意
若要在 UIElement 上使用這些屬性，UWP 專案目標版本必須是 1809 或更新版本。 如需有關設定專案版本的詳細資訊，請參閱版本調適型應用程式。
範例
| WinUI 2 程式庫 | |
|---|---|
 |
如果您已安裝 WinUI 2 資源庫應用程式，請按一下此處以開啟應用程式並查看動畫互通的運作情形。 |
新的渲染屬性會取代舊的渲染屬性
下表顯示了可用於修改 UIElement 渲染的屬性，也可以使用 CompositionAnimation 對其進行動畫處理。
| 屬性 | 類型 | 描述 |
|---|---|---|
| 不透明度 | Double | 物件的不透明度程度 |
| 翻譯 | Vector3 | 移動元素的 X/Y/Z 位置 |
| TransformMatrix | Matrix4x4 | 套用於元素的轉換矩陣 |
| 縮放比例 | Vector3 | 以 CenterPoint 為中心縮放元素 |
| 旋轉 | Float | 圍繞 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);
