共用方式為

以時間為基礎的動畫

當元件或整個用戶體驗變更時，終端使用者通常會以兩種方式加以觀察：經過一段時間或立即觀察。 在 Windows 平臺上，前者優先於後者，因為使用者無法追蹤所發生的情況，因此會立即變更的用戶體驗通常會混淆和驚喜使用者。 用戶接著會將體驗視為不雅和不自然。

相反地，您可以逐步變更UI以引導使用者，或主動通知使用者體驗中的變更。 在 Windows 平臺上，這是使用時間型動畫來完成的，也稱為 KeyFrameAnimations。 KeyFrameAnimations 可讓您隨著時間變更 UI，並控制動畫的每個層面，包括其啟動方式和時間，以及其到達其結束狀態的方式。 例如，將物體動畫移動到新位置需時 300 毫秒，比起瞬間「傳送」到那裡來得更令人愉快。 使用動畫代替瞬間變更時，其最終結果是帶來更愉快且具吸引力的體驗。

以時間為基礎的動畫類型

有兩種以時間為基礎的動畫類別，可用來在 Windows 上建置美觀的用戶體驗：

顯式動畫 – 如名稱所示，您明確啟動動畫進行更新。 隱含動畫 – 當條件達成時，系統會自動為你啟動這些動畫。

在本文中，我們將討論如何利用 KeyFrameAnimations 來創建並使用 明確 的時間型動畫。

對於明確和隱含的時間基礎動畫，有不同類型，這些類型對應於您可以為 CompositionObjects 建立動畫的不同屬性類型。

  • 顏色關鍵幀動畫
  • 四元數關鍵影格動畫
  • ScalarKeyFrameAnimation（標量關鍵影格動畫）
  • Vector2關鍵幀動畫
  • Vector3KeyFrameAnimation（向量3關鍵幀動畫）
  • Vector4KeyFrameAnimation

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

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

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

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

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

  1. 識別 CompositionObject 及其您需要產生動畫效果的個別屬性。
  2. 建立 Compositor 的 KeyFrameAnimation 類型範本，該範本符合您想要建立動畫的屬性類型。
  3. 使用動畫範本，開始新增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> 在 1 秒內動畫至 <200,0,0>。 此外，您想要看到這些位置之間的視覺動畫 10 次。

關鍵幀動畫

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

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

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

然後，您可以定義 KeyFrameAnimation 的屬性來描述動畫的持續時間，以及在兩個位置（目前和 <200,0,0>）之間進行動畫轉換的行為，重複 10 次。

    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);
} 
  • Last updated on