基本動畫

  • 發行項

.NET 多平臺應用程式 UI （.NET MAUI） 動畫類別會以視覺元素的不同屬性為目標，一般的基本動畫會在一段時間內逐漸將屬性從一個值變更為另一個值。

您可以使用 類別所提供的 ViewExtensions 擴充方法來建立基本動畫，該方法會在 物件上 VisualElement 運作：

根據預設，每個動畫將需要 250 毫秒。 不過，建立動畫時可以指定每個動畫的持續時間。

注意

類別 ViewExtensions 也提供 LayoutTo 擴充方法。 不過，這個方法供版面配置用來以動畫顯示包含大小和位置變更的配置狀態之間的轉換。

類別中的 ViewExtensions 動畫擴充方法都是異步的，並傳 Task<bool> 回 物件。 如果動畫完成，而且true動畫已取消，則傳回值false為 。 因此，當動畫作業與 await 運算符結合時，就可以建立循序動畫，並在上一個方法完成之後執行後續動畫方法。 如需詳細資訊，請參閱 復合動畫。

如果需要讓動畫在背景中完成， await 則可以省略 運算符。 在此案例中，動畫擴充方法會在起始動畫之後快速傳回，且動畫發生在背景中。 建立復合動畫時，可以利用這項作業。 如需詳細資訊，請參閱 復合動畫。

在Android上，動畫會遵守系統動畫設定：

  • 如果系統動畫已停用（由輔助功能功能或開發人員功能），新的動畫會立即跳至其完成狀態。
  • 如果在動畫進行時啟動裝置的省電模式，動畫會立即跳至其完成狀態。
  • 如果裝置的動畫持續時間設定為零（已停用），而動畫正在進行中，且 API 版本為 33 或更新版本，動畫會立即跳至其完成狀態。

單一動畫

類別中的每個 ViewExtensions 擴充方法都會實作單一動畫作業，該作業會在一段時間內逐漸將屬性從一個值變更為另一個值。

輪替

使用 方法執行 RotateTo 旋轉，以漸進方式變更 Rotation 元素的 屬性：

await image.RotateTo(360, 2000);
image.Rotation = 0;

在此範例中， Image 實例會在 2 秒內旋轉最多 360 度（2000 毫秒）。 方法 RotateTo 會取得動畫開頭專案的目前 Rotation 屬性值，然後從該值旋轉至第一個自變數 （360）。 動畫完成之後，影像的 Rotation 屬性會重設為 0。 這可確保 Rotation 在動畫結束之後，屬性不會維持在 360，這樣會防止其他旋轉。

注意

除了 RotateTo 方法之外，還有和 RotateXToRotateYTo 方法分別以動畫顯示 RotationX 和 RotationY 屬性。

相對旋轉

使用 方法執行 RelRotateTo 相對旋轉，以漸進方式變更 Rotation 元素的 屬性：

await image.RelRotateTo(360, 2000);

在此範例中， Image 實例會從起始位置旋轉 360 度，超過 2 秒（2000 毫秒）。 方法 RelRotateTo 會取得動畫開頭專案的目前 Rotation 屬性值，然後從該值旋轉至值加上其第一個自變數 （360）。 這可確保每個動畫一律會從起始位置旋轉 360 度。 因此，如果在動畫進行中時叫用新的動畫，它會從目前的位置開始，而且可能以非遞增 360 度的位置結束。

調整大小

調整是使用 ScaleTo 方法執行，此方法會逐漸變更 Scale 項目的 屬性：

await image.ScaleTo(2, 2000);

在此範例中， Image 實例的大小會相應增加兩倍，超過2秒（2000毫秒）。 方法 ScaleTo 會取得動畫開頭專案的目前 Scale 屬性值，然後從該值調整為第一個自變數。 這會影響將影像大小擴充為其大小兩倍的效果。

注意

除了 ScaleTo 方法之外，還有和 ScaleXToScaleYTo 方法分別以動畫顯示 ScaleX 和 ScaleY 屬性。

相對調整

使用 方法執行 RelScaleTo 相對縮放，這會逐漸變更 Scale 項目的 屬性：

await image.RelScaleTo(2, 2000);

在此範例中， Image 實例的大小會相應增加兩倍，超過2秒（2000毫秒）。 方法 RelScaleTo 會取得動畫開頭專案的目前 Scale 屬性值，然後從該值調整為值加上其第一個自變數。 這可確保每個動畫一律會從起始位置調整為 2。

使用錨點調整和旋轉

AnchorX視覺效果專案的 和屬性會設定 和 AnchorYScale 屬性的Rotation縮放或旋轉中心。 因此，其值也會影響 RotateTo 和 ScaleTo 方法。

Image假設已放置在版面配置中央的 ，下列程式代碼範例會藉由設定其 AnchorY 屬性，示範在版面配置中央旋轉影像：

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

若要繞 Image 版面配置中心旋轉實例，和 AnchorXAnchorY 屬性必須設定為相對於 寬度和高度 Image的值。 在此範例中，會將的中心 Image 定義為配置的中心，因此預設值 AnchorX 0.5 不需要變更。 不過，屬性 AnchorY 會重新定義為從 頂端 Image 到版面配置中心點的值。 這可確保 Image 在版面配置中心點周圍進行 360 度的完整旋轉。

翻譯

翻譯會使用 TranslateTo 方法執行，此方法會逐漸變更 TranslationX 專案的 和 TranslationY 屬性：

await image.TranslateTo(-100, -100, 1000);

在此範例中 Image ，實例會水準和垂直轉譯超過 1 秒 （1000 毫秒）。 方法 TranslateTo 會同時將影像 100 個裝置獨立單位轉譯為左側，向上轉譯 100 個裝置獨立單位。 這是因為第一個和第二個自變數都是負數。 提供正數會將影像轉譯為右側和向下。

重要

如果元素一開始已配置螢幕，然後轉譯到畫面上，則在翻譯元素的輸入配置維持在畫面外，且使用者無法與其互動。 因此，建議將檢視配置在其最終位置，然後執行任何必要的翻譯。

淡出

會使用 FadeTo 方法執行淡化，以漸進方式變更 Opacity 元素的 屬性：

image.Opacity = 0;
await image.FadeTo(1, 4000);

在此範例中 Image ，實例會淡入超過 4 秒（4000 毫秒）。 方法 FadeTo 會取得動畫開頭專案的目前 Opacity 屬性值，然後從該值淡入到其第一個自變數。

復合動畫

復合動畫是動畫的循序組合，而且可以使用 運算子建立 await ：

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

在此範例中 Image ，實例會轉譯超過 6 秒（6000 毫秒）。 的 Image 轉譯會使用五個動畫，而 await 運算元表示每個動畫會循序執行。 因此，後續動畫方法會在上一個方法完成之後執行。

復合動畫

復合動畫是動畫的組合，其中兩個或多個動畫會同時執行。 結合等候和非等候的動畫，即可建立復合動畫：

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

在此範例中 Image ，實例會調整並同時旋轉超過 4 秒（4000 毫秒）。 的縮放 Image 比例會使用與旋轉同時發生的兩個循序動畫。 RotateTo方法會在沒有運算符的情況下執行，並立即傳回 ，然後開始第一個awaitScaleTo動畫。 第 await 一 ScaleTo 個方法上的 運算符會延遲第二 ScaleTo 個方法，直到第一個 ScaleTo 方法完成為止。 此時動畫 RotateTo 已完成一半， Image 並將旋轉 180 度。 在最後 2 秒（2000 毫秒）期間，第二 ScaleTo 個動畫和 RotateTo 動畫都已完成。

同時執行多個動畫

Task.WhenAny和 Task.WhenAll 方法可用來同時執行多個異步方法，因此可以建立復合動畫。 這兩種方法 Task 都會傳回 物件，並接受每一個傳回 Task 物件的方法集合。 方法 Task.WhenAny 會在集合中的任何方法完成執行時完成，如下列程式代碼範例所示：

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

在此範例中 Task.WhenAny ，方法包含兩個工作。 第一個 Image 工作會輪替實例超過 4 秒（4000 毫秒），而第二個工作則會將影像調整為 2 秒（2000 毫秒）。 當第二個工作完成時 Task.WhenAny ，方法呼叫就會完成。 不過，即使 RotateTo 方法仍在執行中，第二 ScaleTo 個方法還是可以開始。

方法 Task.WhenAll 會在其集合中的所有方法都完成時完成，如下列程式代碼範例所示：

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

在此範例中 Task.WhenAll ，方法包含三個工作，每個工作執行超過 10 分鐘。 每個Task旋轉的旋轉數不同 360 度 – 307 輪替、251 RotateXTo次旋轉RotateTo，以及 199 次旋轉RotateYTo。 這些值是質數，因此可確保輪替不會同步處理，因此不會產生重複的模式。

取消動畫

應用程式可以使用對擴充方法的 CancelAnimations 呼叫來取消一或多個動畫：

image.CancelAnimations();

在此範例中，實例上 Image 執行的所有動畫都會立即取消。