組合動畫

Windows.UI.Composition API 可讓您在統一 API 層中建立、動畫化、轉換及操作撰寫器物件。 組合動畫提供一種強大且有效率的方式,用來在應用程式 UI 中執行動畫。 它們從頭開始設計,以確保您的動畫以 60 FPS 執行時獨立於 UI 執行緒,而且讓您能夠彈性地使用時間、輸入和其他屬性來驅動動畫,打造驚人的體驗。

Windows 中的動作

可以將動作設計想成電影。 順暢的轉場能讓您專注於故事本身,讓體驗與生活結合。 我們可以將這些感覺納入我們的設計中,使用電影的輕鬆感,帶領人們從一個工作移往下一項工作。 動作通常是區隔使用者介面與使用者體驗之間的區別因素。

CompositionAnimations 是 Windows UI 平台的基本建構元素,提供強大且有效率的方式,讓您在應用程式的 UI 中建立動作體驗。 動畫引擎從頭開始設計,以確保您的動作以 60 FPS 執行時,獨立於 UI 執行緒。 這些動畫的設計目的是提供彈性,以根據時間、輸入和其他屬性來建立創新的動作體驗。

動作範例

以下是應用程式中的一些動作範例。

在這裡,應用程式會使用連接動畫來建立項目影像的動畫,因為它會「繼續」成為次頁標題的一部分。 效果有助於在整個轉換中保持使用者內容。

An example of Connected Animation

在這裡,視覺視差效果會在 UI 捲動或平移時,以不同的速率移動不同的物件,來建立深度、透視和移動的感覺。

An example of parallax with a list and background image

使用 CompositionAnimations 建立動作

若要在 UI 中產生動作,開發人員可以在 XAML 或視覺層中存取動畫。 視覺層的動畫可為開發人員提供一系列優點:

  • 效能 – Windows UI 平台上的動畫不是傳統的 UI 執行緒繫結動畫,而是以 60 FPS 在獨立執行緒上運作,可以帶來順暢的動作體驗。
  • 範本化模型 – Windows UI 層中的動畫是範本,這表示可以在多個物件上使用單一動畫,並調整屬性或參數,而不必擔心阻礙先前的使用。
  • 自訂 – Windows UI 層不僅可讓您輕鬆製作美觀的 UI,還能使用各種動畫類型,透過從簡單到複雜的自訂項目,創造全新且驚人的體驗

如果是以 Windows UI 層建立體驗的開發人員,則您可以存取各種動畫概念,讓您的設計化為現實。 您可以使用上述任何概念,以動畫顯示任何 CompositionObject 的屬性或子通道元件 (適用時)。

注意

並非所有 CompositionObject 的屬性皆可化為動畫。 請參閱個別 CompositionObject 的文件,以判斷屬性是否可產生動畫效果。

注意

子通道一詞是指屬性的元件形式。 例如,Vector3 Offset 屬性的 X 或 XY 子通道。

動畫概念 描述
使用 KeyFrameAnimations 建立以時間為基礎的動作 KeyFrameAnimations 可用來在一段時間內直接控制整個動作體驗。 開發人員會使用傳統主要畫面格的方式,來描述動作的開始、結束、插值,以及持續時間。
使用 ExpressionAnimations 建立相對動作 ExpressionAnimations 是用來描述,要如何以相對於另一個物件的屬性,來為一個物件的屬性驅動動作。 開發人員定義了一個數學方程式,此方程式定義了以參考為基礎的關聯性。
ImplicitAnimations 這些動畫是以觸發程序為基礎,而且會與核心應用程式邏輯分開定義。 ImplicitAnimations 是用來描述在直接屬性變更時,為回應這些變更而產生動畫的方式和時機。
使用輸入動畫建立輸入驅動動作 輸入動畫涵蓋一組案例,可讓開發人員透過觸控或其他輸入形式來描述操作型動作。 這些動畫會根據使用中的使用者輸入或手勢來驅動。
使用 NaturalMotionAnimations 建立以物理為基礎的動作 NaturalMotionAnimations 是用來描述自然和熟悉的動作體驗,這些動作體驗是以真實世界作用力驅動的動作為基礎。 開發人員不會定義時間,而是定義動作的特性 (例如,彈簧的阻尼比率)