输入驱动的动画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 中的命中测试使得创建 Spotlight Reveal 等体验成为可能时,利用光标位置。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 创建 VisualInteractionSource。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.