輸入導向動畫Input-driven animations

本文簡介 InputAnimation API,並建議如何在您的 UI 中使用這些動畫類型。This article provides an introduction to the InputAnimation API, and recommends how to use these types of animations in your UI.

必要條件Prerequisites

我們此處假設您已熟悉這些文章中討論的概念:Here, we assume that you're familiar with the concepts discussed in these articles:

從使用者互動方式導向的平滑動作Smooth motion driven from user interactions

在 Fluent 設計語言中,使用者和應用程式之間的互動是第一要務。In the Fluent Design language, interaction between end users and apps is of the utmost importance. 應用程式不只需要看起來融為一體,也必須能自然和生動地回應與它們互動的使用者。Apps not only have to look the part, but also respond naturally and dynamically to the users that interact with them. 這表示把手指放在螢幕上時,UI 應該適當回應以變更輸入角度、捲動應該感覺順暢,並能與手指緊密結合的在畫面間移動。This means when a finger is placed on the screen, the UI should gracefully react to changing degrees of input; scrolling should feel smooth, and stick to a finger panning across the screen.

建立能動態流暢地回應使用者輸入的 UI,可產生更高的使用者參與率 - 當使用者與不同的 UI 體驗互動時,動作不只要看起來很棒,更要感覺很棒且自然。Building UI that dynamically and fluidly responds to user input results in higher user engagement - Motion now not only looks good, but feels good and natural when users interact with your different UI experiences. 這可讓使用者更輕鬆與您的應用程式產生連結,讓體驗更令人印象深刻且更容易使用。This enables end users to more easily connect with your application, making the experience more memorable and delightful.

超越觸控Expanding past just touch

雖然觸控是使用者用來操作 UI 內容的其中一種常見介面,但他們也會使用各種其他輸入形式,例如滑鼠和手寫筆。Although touch is one of the more common interfaces end users use to manipulate UI content, they will also use various other input modalities such mouse and pen. 在這些案例中,請務必謹記,使用者會察覺 UI 動態回應他們的輸入,無論他們選擇使用何種輸入樣式。In these cases, it is important that end users perceive that your UI responds dynamically to their input, regardless of what input modality they choose to use. 在設計輸入導向的動作體驗時,您應該認識不同的輸入形式。You should be cognizant of the different input modalities when designing input-driven motion experiences.

不同的輸入導向動作體驗Different Input-Driven Motion Experiences

InputAnimation 空間提供數個不同的體驗,以建立動態回應的動作。The InputAnimation space provides several different experiences for you to create dynamically responding motion. 就像其他 Windows UI 動畫系統,這些輸入導向動畫在獨立執行緒上操作,這有助動態的動作體驗。Like the rest of the Windows UI Animation system, these input-driven animations operate on an independent thread, which helps contribute to the dynamic motion experience. 不過,有時候體驗運用現有的 XAML 控制項和元件,這些體驗有部分仍與 UI 執行緒綁定。However, in some cases where the experience leverages existing XAML controls and components, parts of those experiences are still UI thread bound.

在建置動態輸入導向動作動畫時,您會建立三個核心體驗:There are three core experiences that you create when building dynamic input-driven motion animations:

  1. 美化現有的 ScrollView 體驗 – 讓 XAML ScrollViewer 的位置驅動動態動畫體驗。Enhancing Existing ScrollView Experiences – enable the position of a XAML ScrollViewer to drive dynamic animation experiences.
  2. 指標位置導向體驗 – 使用點擊測試 UIElement 上的游標位置,驅動動態動畫體驗。Pointer Position-driven Experiences – utilize the position of a cursor on a hit tested UIElement to drive dynamic animation experiences.
  3. 使用 InteractionTracker 建立自訂操作體驗 – 使用 InteractionTracker,建立完全自訂、與執行緒無關的操作體驗 (例如捲動/縮放畫布)。Custom Manipulation experiences with InteractionTracker – create a fully customized, off-thread manipulation experiences with InteractionTracker (such as a scrolling/zooming canvas).

美化現有的 ScrollViewer 體驗Enhancing Existing ScrollViewer Experiences

建立更為動態體驗的其中一個常見方式是建置在現有的 XAML ScrollViewer 控制項上。One of the common ways to create more dynamic experiences is to build on top of an existing XAML ScrollViewer control. 在這些情況下,您利用 ScrollViewer 的捲動位置來建立額外 UI 元件,讓簡單捲動體驗更為動態。In these situations, you leverage the scroll position of a ScrollViewer to create additional UI components that make a simple scrolling experience more dynamic. 一些範例包括自黏/害羞標頭和視差。Some examples include Sticky/Shy Headers and Parallax.

使用視差的清單檢視

害羞標頭

在建立這些體驗類型時,有一般公式可供遵循:When creating these types of experiences, there is a general formula to follow:

  1. 存取您想要用來驅動動畫的 XAML ScrollViewer 的 ScrollManipulationPropertySet。Access the ScrollManipulationPropertySet off of the XAML ScrollViewer you wish to drive an animation.
    • 透過 ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API 完成Done via the ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
    • 傳回包含稱為 Translation 之屬性的 CompositionPropertySetReturns a CompositionPropertySet containing a property called Translation
  2. 使用參考 Translation 屬性的方程式來建立 Composition ExpressionAnimation。Create a Composition ExpressionAnimation with an equation that references the Translation property.
  3. 在 CompositionObject 的屬性上開始動畫。Start the animation on a CompositionObject’s property.

如需建置這些體驗的詳細資訊,請參閱美化現有的 ScrollViewer 體驗For more info on building these experiences, see Enhance existing ScrollViewer experiences.

指標位置導向體驗Pointer Position-driven experiences

另一個與輸入有關的常見動態體驗是根據指標位置 (例如滑鼠游標) 來驅動動畫。Another common dynamic experience involving input is to drive an animation based on the position of a pointer such as a Mouse cursor. 在這些情況下,開發人員在 XAML UIElement 中測試點擊時運用游標位置,以便建立焦點顯示之類的體驗。In these situations, developers leverage the location of a cursor when hit tested within a XAML UIElement that makes experiences like Spotlight Reveal possible to create.

指標焦點範例

指標旋轉範例

在建立這些體驗類型時,有一般公式可供遵循:When creating these types of experiences, there is a general formula to follow:

  1. 存取測試點擊時您想要知道游標位置之 XAML UIElement 的 PointerPositionPropertySet。Access the PointerPositionPropertySet off a XAML UIElement that you wish to know the cursor position when hit tested.
    • 透過 ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API 完成Done via the ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
    • 傳回包含稱為 Position 之屬性的 CompositionPropertySetReturns a CompositionPropertySet containing a property called Position
  2. 使用參考 Position 屬性的方程式來建立 CompositionExpressionAnimation。Create a CompositionExpressionAnimation with an equation that references the Position property.
  3. 在 CompositionObject 的屬性上開始動畫。Start the animation on a CompositionObject’s property.

使用 InteractionTracker 自訂操作體驗Custom manipulation experiences with InteractionTracker

利用 XAML ScrollViewer 的其中一個挑戰是它繫結至 UI 執行緒。One of the challenges with utilizing a XAML ScrollViewer is that it is bound to the UI thread. 因此,如果 UI 執行緒變得忙碌,捲動和縮放體驗常常會延遲並抖動,導致不吸引人的體驗。As a result, the scrolling and zooming experience can often lag and jitter if the UI thread becomes busy and results in an unappealing experience. 此外,也無法自訂 ScrollViewer 體驗的多個層面。In addition, it is not possible to customize many aspects of the ScrollViewer experience. 建立 InteractionTracker 可以提供一組基本要素來建立在獨立執行緒中執行的自訂操作體驗,用以解決這兩個問題。InteractionTracker was created to solve both issues by providing a set of building blocks to create custom manipulation experiences that are run on an independent thread.

3D 互動範例

拖動動畫範例

使用 InteractionTracker 建立體驗時,有一般公式可供遵循:When creating experiences with InteractionTracker, there is a general formula to follow:

  1. 建立您的 InteractionTracker 物件並定義屬性。Create your InteractionTracker object and define its properties.
  2. 為應該擷取 InteractionTracker 使用之輸入的任何 CompositionVisual 建立 VisualInteractionSources。Create VisualInteractionSources for any CompositionVisual that should capture input for InteractionTracker to consume.
  3. 使用參考 InteractionTracker 之 Position 屬性的方程式,建立 Composition ExpressionAnimation。Create a Composition ExpressionAnimation with an equation that references the Position property of InteractionTracker.
  4. 在您希望由 InteractionTracker 驅動的 Composition Visual 屬性上開始動畫。Start the animation on a Composition Visual’s property that you wish to be driven by InteractionTracker.