共用方式為


組合動畫

Microsoft.UI.Composition API 允許你在統一的 API 層中建立、動畫、轉換及操作合成器物件。 合成動畫提供了一種強大且高效的方式,可以在 WinUI 應用程式的介面中執行動畫。 它們從零開始設計,確保你的動畫能以 60 FPS 獨立於 UI 執行緒運行,並讓你有彈性地利用時間、輸入和其他屬性來打造驚人的動畫體驗。

Windows 中的動態

把動態設計想像成一部電影。 無縫銜接讓你專注於故事,讓體驗栩栩如生。 我們可以將這種感覺帶入設計,輕鬆地引導人們從一個任務到下一個任務。 動態通常是使用者介面與使用者體驗之間的區分因素。

作為 Windows UI 平台的基本組件,CompositionAnimations 提供了一種強大且高效的方式,讓你能在應用程式的使用者介面中創造動態體驗。 動畫引擎從零開始設計,確保你的動作能以 60 FPS 運行,不受介面執行緒影響。 這些動畫設計上提供彈性,能根據時間、輸入及其他屬性打造創新的動態體驗。

運動範例

以下是應用程式中動態的幾個範例。

在這裡,應用程式使用連接動畫效果,使物品圖片能夠「繼續」過渡成為下一頁標頭的一部分。 此效果有助於在整個轉換過程中維護使用者內容。

連結動畫的範例

這裡的視覺視差效果會在介面滾動或平移時,以不同速率移動不同物件,營造出深度、透視與動態的感覺。

一個帶有背景影像和清單的視差範例

使用 CompositionAnimations 來創造動態

要在 UI 中產生動態,開發者可以在 XAML 或視覺圖層中存取動畫。 視覺層的動畫為開發者帶來一系列好處:

  • 效能——與傳統的 UI 執行緒綁定動畫不同,Windows UI 平台上的動畫以獨立執行緒以 60 FPS 運作,實現流暢的動態體驗。
  • 模板模型——Windows UI 圖層中的動畫是範本,意即可以在多個物件上使用單一動畫,並調整屬性或參數,而不用擔心妨礙先前的使用。
  • 自訂化——Windows 介面層不僅讓製作美麗的介面變得簡單,還提供完整的動畫類型,透過漸層自訂創造全新且驚人的體驗

作為在 Windows UI 層層創造體驗的開發者,你可以使用多種動畫概念,讓你的設計栩栩如生。 你可以用這些概念來為任何 CompositionObject 的屬性或子通道元件(如適用)做動畫。

備註

並非 CompositionObject 的所有屬性都是可動畫化的。 參考個別 CompositionObject 的文件以判斷某屬性是否可被動畫化。

備註

子通道一詞指的是屬性的組成形式。 例如,Vector3 偏移特性的 X 或 XY 子通道。

動畫概念 說明
以時間為基礎的動畫與關鍵幀動畫(KeyFrameAnimations) 關鍵影格動畫用於直接控制一段時間內整個動態體驗。 開發者以傳統關鍵影格方式描述動作的開始、結束、中間插值及持續時間。
使用 ExpressionAnimations 進行相對運動 ExpressionAnimations 用來描述一個物件屬性的運動應該如何相對於另一個物件的屬性進行驅動。 開發者會定義一個數學方程式,用以定義基於參考的關係。
隱含動畫 這些動畫是基於觸發器,且與核心應用程式邏輯分開定義。 隱式動畫用來描述動畫如何以及何時作為直接屬性變更的回應而發生。
以輸入驅動的動作搭配輸入動畫 輸入動畫涵蓋一系列情境,讓開發者能透過觸控或其他輸入方式描述基於操作的動作。 這些動畫是根據使用者的主動輸入或手勢驅動的。
基於物理的動態效果與自然運動動畫 自然動態動畫用來描述基於真實世界力驅動運動的自然且熟悉的動作體驗。 開發者不定義時間,而是定義運動特性(例如彈簧的阻尼比)