共用方式為

基於時間的動畫

當某個元件或整個使用者體驗改變時，最終使用者通常會以兩種方式觀察到：時間內或瞬間。 在 Windows 平台上，前者比後者更受青睞——使用者體驗瞬間改變，常常讓終端使用者感到困惑和驚訝，因為他們無法跟上發生了什麼。 最終使用者會覺得這種體驗令人震驚且不自然。

相反地，你可以隨時間調整使用者介面，引導最終使用者操作，或通知他們體驗的變更。 在 Windows 平台上，這是透過使用基於時間的動畫，也稱為 KeyFrameAnimations 來實現。 KeyFrameAnimations 讓你能隨時間改變使用者介面，並控制動畫的每個面向，包括動畫何時開始、何時開始，以及如何達到結束狀態。 例如，用300毫秒將物體動畫移動到新位置，比起瞬間「傳送」它到那裡更順暢。 當使用動畫取代即時變化時，最終體驗會更愉悅且吸引人。

基於時間的動畫類型

在 Windows 上，你可以用兩類時間動畫來打造美麗的使用者體驗：

明確動畫 ——顧名思義，你明確啟動動畫來進行更新。 隱含動畫 ——當條件達成時，系統會代表你啟動這些動畫。

本文將討論如何利用 KeyFrameAnimations 創建並使用 明確 的時間基礎動畫。

無論是顯式動畫還是隱式的時間動畫，都有不同類型，對應你可動畫化的 CompositionObjects 屬性不同類型。

  • 色彩關鍵幀動畫
  • 四元數關鍵影格動畫
  • 標量關鍵格動態動畫
  • 向量2關鍵幀動畫
  • Vector3關鍵幀動畫
  • Vector4KeyFrameAnimation

使用 KeyFrameAnimations 製作基於時間的動畫

在說明如何用 KeyFrameAnimations 製作明確的時間基礎動畫之前，先來談談幾個概念。

  • 關鍵影格（KeyFrames）– 這是動畫會透過的個別「快照」。
    • 定義為鍵與值對。 鍵值代表 0 到 1 之間的進度，即表示此「快照」在動畫壽命中所處的位置。 另一個參數代表此時的財產價值。
  • KeyFrameAnimation 屬性 – 可依使用者介面需求套用的自訂選項。
    • DelayTime – 呼叫 StartAnimation 後動畫開始前的時間。
    • 時長——動畫的時長。
    • IterationBehavior – 為動畫計算或無限次重複行為。
    • IterationCount – 關鍵影格動畫重複的有限次數。
    • 關鍵影格計數——讀取特定關鍵影格動畫中的關鍵影格數量。
    • StopBehavior – 指定在呼叫 StopAnimation 時動畫屬性值的行為。
    • 方向 – 指定播放時動畫的方向。
  • 動畫組 – 同時啟動多個動畫。
    • 當想同時為多個物件做動畫時，常常會用到。

欲了解更多資訊，請參閱 CompositionAnimationGroup。

有了這些概念，讓我們來談談構建 KeyFrameAnimation 的基本公式：

  1. 找出你需要動畫的 CompositionObject 及其相應屬性。
  2. 建立一個與你想動畫屬性相符的合成器 KeyFrameAnimation Type 範本。
  3. 使用動畫範本，開始添加關鍵影格並定義動畫屬性。
    • 至少需要一個關鍵影格（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次。

關鍵影格動畫

你首先要識別想要進行動畫處理的 CompositionObject 和屬性。 此時，紅色方格由名為 redVisual的 Composition Visual 表示。 你從這個物件開始動畫。

接著，因為你想動畫 Offset 屬性，你需要建立一個 Vector3KeyFrameAnimation（Offset 類型為 Vector3）。 你也會設定 KeyFrameAnimation 對應的關鍵影格。

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

接著你定義 KeyFrameAnimation 的屬性，描述它的持續時間，以及在兩個位置（當前和 <200,0,0>）之間動畫 10 次的行為。

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.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 = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
} 
  • Last updated on