以時間為基礎的動畫

  • 發行項

當使用者體驗有元件或整體變更時，終端使用者通常會以兩種方式發現這些變更：逐漸發現或是立即發現。 在 Windows 平台上，前者優先於後者，因為使用者無法追上所發生的情況，因此立即變更的使用者體驗，通常會對使用者帶來混淆和驚愕。 終端使用者接著會認為這個體驗既不順暢又不自然。

相反地，您可以逐漸變更 UI 來引導使用者完成這個歷程，或通知使用者這些體驗的變更。 在 Windows 平台上，這是透過使用以時間為基礎的動畫來完成，也就是 KeyFrameAnimations。 KeyFrameAnimations 可讓您逐漸變更 UI，並控制動畫的每個層面，包括其開始的方式和時間，以及其到達結束狀態的方式。 舉例來說，用超過 300 毫秒的時間將物件以動畫方式送到新的位置，比起立即「傳送」它到那個位置，能帶來更好的體驗。 使用動畫而不是立即改變時，最終結果是更愉快且更吸引人的體驗。

以時間為基礎的動畫類型

有兩種以時間為基礎的動畫類別，可用來在 Windows 上建構美麗的使用者體驗：

明確動畫 – 如名稱所示，您明確啟動動畫來進行更新。 隱含動畫 – 當符合條件時，系統會代表您來啟動這些動畫。

在本文中，我們將討論如何建立和使用具有 KeyFrameAnimations 且以時間為基礎的明確動畫。

針對以時間為基礎的明確和隱含動畫，還有不同的類型，對應至您可以產生動畫之 CompositionObjects 的不同屬性類型。

  • ColorKeyFrameAnimation
  • QuaternionKeyFrameAnimation
  • ScalarKeyFrameAnimation
  • Vector2KeyFrameAnimation
  • Vector3KeyFrameAnimation
  • Vector4KeyFrameAnimation

使用 KeyFrameAnimations 建立以時間為基礎的動畫

在描述如何使用 KeyFrameAnimations 建立以時間為基礎的明確動畫之前，讓我們來看看幾個概念。

  • KeyFrames – 這些是動畫將以動畫播放的個別「快照」。
    • 定義為索引鍵和值組。 索引鍵代表介於 0 到 1 之間的進度，也就是在動畫存留期中，此「快照」的發生位置。 另一個參數表示目前的屬性值。
  • KeyFrameAnimation 屬性 – 您可以套用的自訂選項，以便符合 UI 的需求。
    • DelayTime – 在呼叫 StartAnimation 之後到開始動畫之前的時間。
    • Duration – 動畫的持續時間。
    • IterationBehavior – 動畫重複行為的重複次數或無限重複。
    • IterationCount – KeyFrame 動畫將重複的有限次數。
    • KeyFrame Count – 讀取特定 KeyFrame 動畫中的 KeyFrame 數量。
    • StopBehavior – 指定呼叫 StopAnimation 時動畫屬性值的行為。
    • Direction – 指定動畫播放的方向。
  • 動畫群組 – 同時啟動多個動畫。
    • 通常用來同時播放多個屬性的動畫效果。

如需詳細資訊，請參閱 CompositionAnimationGroup。

考慮到這些概念，讓我們來討論建構 KeyFrameAnimation 的一般公式：

  1. 識別 CompositionObject 及其您需要產生動畫效果的個別屬性。
  2. 建立撰寫器的 KeyFrameAnimation 類型範本，該範本符合您想要以動畫播放的屬性類型。
  3. 使用動畫範本，開始新增 KeyFrame 並定義動畫的屬性。
    • 至少需要一個 KeyFrame (100% 或 1f 主要畫面格)。
    • 建議一併定義持續時間。
  4. 準備好執行此動畫之後，請在 CompositionObject 上呼叫 StartAnimation(…)，以您想要產生動畫效果的屬性為目標。 具體而言：
    • visual.StartAnimation("targetProperty", CompositionAnimation animation);
    • visual.StartAnimationGroup(AnimationGroup animationGroup);
  5. 如果您有執行中的動畫，而且想要停止動畫或動畫群組，則可以使用這些 API：
    • visual.StopAnimation("targetProperty");
    • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

讓我們看看一個範例，以查看此公式的運作情形。

範例

在此範例中，您想要以動畫顯示視覺效果從 <0,0,0> 到 <200,0,0> 超過 1 秒的位移。 此外，您還想要在這些位置之間看到視覺動畫 10 次。

Key frame animation

首先，請先識別要產生動畫效果的 CompositionObject 和 屬性。 在此情況下，紅色方塊會以名為 redVisual 的組合視覺效果來表示。 您可以從這個物件開始動畫。

接下來，因為您想要以動畫顯示 Offset 屬性，因此您必須建立 Vector3KeyFrameAnimation (Offset 的類型為 Vector3)。 您也會定義 KeyFrameAnimation 的對應 KeyFrames。

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

然後，您可以定義 KeyFrameAnimation 的屬性，以描述其持續時間，以及 10 次在兩個位置 (目前以及 <200,0,0>) 之間產生動畫效果的行為。

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

最後，若要執行動畫，您必須在 CompositionObject 的屬性上啟動動畫。

redVisual.StartAnimation("Offset", animation);

以下是完整的程式碼。

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}