通过


输入驱动的动画

本文介绍 WinUI 和 Windows 应用 SDK 应用中的 InputAnimation API,并建议如何在 UI 中使用这些类型的动画。

先决条件

此处,我们假设你熟悉以下文章中讨论的概念:

由用户交互驱动的平滑运动

在 Fluent Design 语言中,最终用户和应用之间的交互至关重要。 应用不仅要具有合适的外观,还要对与之交互的用户作出自然和动态的响应。 这意味着当手指放置在屏幕上时,UI 应优雅地对输入强度的变化做出反应;滚动应该感觉流畅,并紧随手指在屏幕上滑动。

构建能够动态且流畅响应用户输入的 UI 将提高用户参与度 - 动画效果不仅看起来出色,而且当用户与各种 UI 交互时,感觉良好且自然。 这使最终用户能够更轻松地与应用程序连接,使体验更加令人难忘的和令人愉快。

超越仅触摸的界限

虽然触摸是最终用户用来操作 UI 内容的更常用接口之一,但它们还将使用各种其他输入形式,例如鼠标和笔。 在这些情况下,最终用户必须意识到 UI 会动态响应其输入,而不管他们选择使用何种输入形式。 设计输入驱动运动体验时,应了解不同的输入形式。

不同的输入驱动运动体验

InputAnimation 空间提供了多种不同的体验,用于创建动态响应的动作。 与 Windows 应用 SDK 合成动画系统的其余部分一样,这些输入驱动的动画在独立线程上运行,这有助于促进动态运动体验。 但是,在某些情况下,体验利用现有的 XAML 控件和组件,这些体验的一部分仍受 UI 线程约束。

生成动态输入驱动的运动动画时,有三种核心体验:

  1. 增强现有 ScrollView 体验 - 使 XAML ScrollViewer 的位置能够驱动动态动画体验。
  2. 指针位置驱动体验 - 利用光标在经过命中测试的 UIElement 上的位置来驱动动态动画体验。
  3. 使用 InteractionTracker 的自定义操作体验 - 使用 InteractionTracker(如滚动/缩放画布)创建完全自定义的线程外操作体验。

增强现有 ScrollViewer 体验

创建更多动态体验的常见方法之一是在现有 XAML ScrollViewer 控件的基础上构建。 在这些情况下,可以利用 ScrollViewer 的滚动位置创建其他 UI 组件,使简单的滚动体验更加动态。 一些示例包括粘滞/害羞标头和视差。

具有视差的列表视图

隐藏的标题

创建这些类型的体验时,需要遵循一般公式:

  1. 访问要驱动动画的 XAML ScrollViewer 的 ScrollManipulationPropertySet。
    • 通过 ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement 元素) API 完成
    • 返回包含名为 Translation 的属性的 CompositionPropertySet
  2. 使用引用 Translation 属性的公式创建 Composition ExpressionAnimation。
  3. 在 CompositionObject 的属性上启动动画。

有关生成这些体验的详细信息,请参阅 增强现有的 ScrollViewer 体验

鼠标指针位置驱动的交互方式

涉及输入的另一种常见动态体验是基于指针的位置(如鼠标光标)驱动动画。 在这些情况下,开发人员在 XAML UIElement 中进行测试时利用游标的位置,使聚光灯显示等体验成为可能。

指针聚焦示例

指针旋转示例

创建这些类型的体验时,需要遵循一般公式:

  1. 在进行命中测试时,访问 XAML UIElement 的 PointerPositionPropertySet,以获取光标的位置。
    • 使用 ElementCompositionPreview.GetPointerPositionPropertySet(UIElement 元素) API 完成
    • 返回包含名为 Position 的属性的 CompositionPropertySet
  2. 使用引用 Position 属性的公式创建 CompositionExpressionAnimation。
  3. 在 CompositionObject 的属性上启动动画。

使用 InteractionTracker 的自定义操作体验

利用 XAML ScrollViewer 的挑战之一是绑定到 UI 线程。 因此,如果 UI 线程变得繁忙,滚动和缩放体验常常会抖动和滞后,并导致不理想的体验。 此外,无法自定义 ScrollViewer 体验的许多方面。 InteractionTracker 是通过提供一组构建基块来创建在独立线程上运行的自定义操作体验来解决这两个问题。

3D 交互示例

拉取动画示例

使用 InteractionTracker 创建体验时,需要遵循一般公式:

  1. 创建 InteractionTracker 对象并定义其属性。
  2. 为需要捕获输入供 InteractionTracker 使用的任何 CompositionVisual 创建 VisualInteractionSources。
  3. 使用引用 InteractionTracker 的 Position 属性的公式创建 Composition ExpressionAnimation。
  4. 在要由 InteractionTracker 驱动的合成视觉对象的属性上启动动画。