本文介紹了 WinUI 和 Windows App SDK 應用程式中的 InputAnimation API，並建議如何在你的 UI 中使用這類動畫。
先決條件
在這裡，我們假設你已經熟悉這些文章中討論的概念：
由使用者互動驅動的流暢動作
在 Fluent Design 語言中，終端使用者與應用程式之間的互動至關重要。 應用程式不僅要看起來符合要求，還要自然且動態地回應與使用者互動。 這表示當手指放在螢幕上時，介面應該會優雅地回應輸入的變化程度；滾動應該感覺順暢，並緊隨手指在螢幕上滑動。
打造能動態且流暢地回應使用者輸入的 UI，能提升用戶互動率——現在的 Motion 不僅看起來不錯，當使用者與不同的 UI 體驗互動時，感覺更自然且悅耳。 這讓終端使用者更容易與你的應用程式連結，讓體驗更加難忘且愉快。
擴展到超越觸碰的範圍
雖然觸控是終端使用者常用來操作介面內容的介面之一，但他們也會使用滑鼠和筆等其他輸入方式。 在這些情況下，讓終端使用者感受到你的 UI 會動態回應他們的輸入，無論他們選擇使用哪種輸入模式，都非常重要。 設計以輸入驅動的動態體驗時，你應該了解不同的輸入模式。
不同的輸入驅動的運動體驗
InputAnimation 空間提供多種不同的體驗，讓你能創造動態反應的動作。 與 Windows App SDK 合成動畫系統的其他部分一樣，這些輸入驅動的動畫運作於獨立執行緒上，有助於動態動態體驗。 然而，在某些使用現有 XAML 控制項和元件的情況下，這些體驗的部分仍是 UI 執行緒綁定。
在打造動態輸入驅動的動態動畫時，你會創造三種核心體驗：
- 提升現有 ScrollView 體驗 – 啟用 XAML ScrollViewer 的位置，以驅動動態動畫體驗。
- 指標位置驅動體驗——利用測試 UIElement 上游標的位置來推動動態動畫體驗。
- 使用 InteractionTracker 自訂操作體驗——用 InteractionTracker 打造完全客製化、離線操作的操作體驗（例如捲動/縮放畫布）。
提升現有 ScrollViewer 的使用體驗
創造更動態體驗的常見方法之一是建立在現有的 XAML ScrollViewer 控制項之上。 在這種情況下，你會利用 ScrollViewer 的捲動位置來創造額外的 UI 元件，讓簡單的捲動體驗更具動態感。 例如黏性/隱藏標頭和視差。
在創造這類體驗時，有一個通用的公式可以遵循：
- 從想要用來驅動動畫的 XAML ScrollViewer 中存取 ScrollManipulationPropertySet。
- 透過 ElementCompositionPreview.GetScrollViewerManipulationPropertySet（UIElement element）API 完成
- 回傳一個包含稱為 Translation 的屬性的 CompositionPropertySet
- 建立一個 Composition ExpressionAnimation，包含一個參考 Translation 屬性的方程式。
- 在 CompositionObject 的屬性上啟動動畫。
欲了解更多關於建立這些體驗的資訊，請參閱 「提升現有 ScrollViewer 體驗」。
指標位置控制的體驗
另一種常見的動態操作是根據指標位置（如滑鼠游標）驅動動畫。 在這些情況下，開發者利用游標位置在 XAML UIElement 中測試，讓像 Spotlight Reveal 這樣的體驗成為可能。
在創造這類體驗時，有一個通用的公式可以遵循：
- 要在執行命中測試時知道游標位置，請從 XAML UI 元素中存取 PointerPositionPropertySet。
- 透過 ElementCompositionPreview.GetPointerPositionPropertySet（UIElement element）API 完成
- 回傳一個包含稱為 Position 的屬性的 CompositionPropertySet
- 建立一個 CompositionExpressionAnimation，其中包含一個引用 Position 屬性的方程式。
- 在 CompositionObject 的屬性上開始動畫。
使用 InteractionTracker 的自訂操作體驗
使用 XAML ScrollViewer 的一大挑戰是它綁定在 UI 執行緒上。 因此，當介面執行緒過於繁忙時，捲動和縮放體驗常常會延遲和抖動，導致不討喜的體驗。 此外，ScrollViewer 體驗的許多面向無法自訂。 InteractionTracker 的誕生是為了解決這兩個問題，提供一組建構模組，讓使用者能在獨立執行緒上執行自訂操作體驗。
在使用 InteractionTracker 建立體驗時，有一個通用公式可以遵循：
- 建立你的 InteractionTracker 物件並定義其屬性。
- 應該為任何 CompositionVisual 建立 VisualInteractionSources，使其能夠捕捉輸入供 InteractionTracker 使用。
- 建立一個引用 InteractionTracker 的 Position 屬性的方程式，用來創建 Composition ExpressionAnimation。
- 在你想由 InteractionTracker 控制的 Composition Visual 的屬性上觸發動畫。
