自然运动动画

本文简要概述了 NaturalMotionAnimation 空间,以及如何从概念上考虑如何在 UI 中使用这些类型的动画。

使运动感觉熟悉和自然

出色的应用是创建可捕获和保留用户关注的体验,并帮助引导用户完成任务。 运动是将用户界面与用户体验分开的关键区别因素, 这引发了用户与他们与之交互的应用程序之间的连接。 连接越好,最终用户参与度越高,满意度就越高。

运动有助于建立此连接的一种方法是创建用户熟悉的体验。 用户对基于现实生活体验的动作的感知方式有一种无意识的期望。 我们看到物体如何滑过地板,从桌子上摔下来,相互弹跳,用春天振荡。 利用这种期望的运动,基于现实世界的物理外观和感觉更自然在我们的眼睛。 动作变得更加自然和互动,但更重要的是,整个体验变得更加令人难忘的和令人愉快。

无动画缩放运动刻度运动与立方贝塞尔使用春季动画缩放运动

净结果是用户参与度和应用保留率更高。

平衡控制和动态

在传统 UI 中, KeyFrameAnimation是描述动作的主要方法。 关键帧为设计人员和开发人员提供了最大的控制,用于定义开始、结束和内插。 尽管在许多情况下,这非常有用,但关键帧动画并不非常动态;运动不是自适应的,在任何条件下看起来都一样。

在光谱的另一端,游戏和物理引擎经常出现模拟。 这些体验通常是用户与之交互的最类似生活和动态的体验 - 创造用户每天看到的动态感和随机感。 尽管这使得运动感觉更活跃和动态,但设计人员和开发人员的控制力较低,因此很难集成到传统 UI 中。

控制范围图

NaturalMotionAnimation有助于弥合这种鸿沟 - 为动画的重要元素(如开始/完成)实现控制平衡,但保持外观和感觉自然和动态的运动。

注意

NaturalMotionAnimations 不是关键帧动画的替代项 – 在 Fluent 设计语言中,建议使用关键帧的位置。 NaturalMotionAnimations 用于需要运动但关键帧动画不够动态的地方。

使用 NaturalMotionAnimations

从 Fall Creators Update 开始,可以获得一种运动新体验:弹簧动画。 有关泉水的更深入演练,请参阅 Spring 动画

这种运动类型是通过使用新的 NaturalMotionAnimation 实现的,这是一种以开发人员为中心的新动画类型,使开发人员能够在其 UI 中构建更熟悉和自然的感觉运动,并平衡控制和活力。 它们公开以下功能:

  • 定义开始值和结束值。
  • 定义 InitialVelocity 并绑定到 InteractionTracker 的输入。
  • 定义运动特定的属性(如适用于泉的 DampingRatio)。

入门的常规公式:

  1. 使用 Create 方法之一从 Compositor 创建 NaturalMotionAnimation。
  2. 定义动画的属性。
  3. 将 NaturalMotionAnimation 作为参数传递给 CompositionObject 的 StartAnimation 调用。
    • 或设置为 InteractionTracker InertiaModifier 的 Motion 属性。

使用 spring NaturalMotionAnimation 将视觉对象“spring”设置为新的 X Offset 位置的基本示例:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);