本文简要概述了 NaturalMotionAnimation 空间,以及如何从概念上考虑如何在 UI 中使用这些类型的动画。
使运动感觉熟悉和自然
出色的应用是创建可捕获和保留用户关注的体验,并帮助引导用户完成任务。 运动是将用户界面与用户体验分开的关键区别因素, 这引发了用户与他们与之交互的应用程序之间的连接。 连接越好,最终用户参与度越高,满意度就越高。
运动有助于建立此连接的一种方法是创建用户熟悉的体验。 用户对基于现实生活体验的动作的感知方式有一种无意识的期望。 我们看到物体如何滑过地板,从桌子上掉落,相互碰撞并反弹,在弹簧的作用下振荡。 这种通过利用期望而产生的运动,符合现实世界物理规律,在我们眼中显得更自然。 动作变得更加自然和互动,但更重要的是,整个体验变得更加令人难忘的和令人愉快。
净结果是用户参与度和应用保留率更高。
平衡控制和动态
在传统 UI 中, KeyFrameAnimation是描述动作的主要方法。 关键帧为设计人员和开发人员提供了最大的控制,用于定义开始、结束和内插。 尽管在许多情况下,这非常有用,但关键帧动画并不非常动态;运动不是自适应的,在任何条件下看起来都一样。
在光谱的另一端,游戏和物理引擎经常出现模拟。 这些体验通常是用户与之交互的最类似生活和动态的体验 - 创造用户每天看到的动态感和随机感。 尽管这使得运动感觉更活跃和动态,但设计人员和开发人员的控制力较低,因此很难集成到传统 UI 中。
NaturalMotionAnimation的存在有助于弥合这种鸿沟——在动画的重要元素(如开始和结束)上实现控制的平衡,同时保持运动的自然和动态外观与感觉。
注释
NaturalMotionAnimations 并不是用来替代关键帧动画的——因为在 Fluent 设计语言中,仍有推荐使用关键帧动画的地方。 NaturalMotionAnimations 用于需要运动但关键帧动画不够动态的地方。
使用自然运动动画
在 WinUI 和 Windows 应用 SDK 中,你可以访问自然运动体验: 春季动画。 有关泉水的更深入演练,请参阅 Spring 动画 。
这种运动类型是通过使用新的 NaturalMotionAnimation 实现的,这是一种以开发人员为中心的新动画类型,使开发人员能够在其 UI 中构建更熟悉和自然的感觉运动,并平衡控制和活力。 它们公开以下功能:
- 定义开始值和结束值。
- 定义 InitialVelocity 并将其绑定到与 InteractionTracker 关联的输入。
- 定义运动的特定属性(如弹簧的阻尼比)。
入门的常规公式:
- 使用 Create 方法之一从 Compositor 中创建 NaturalMotionAnimation。
- 定义动画的属性。
- 将 NaturalMotionAnimation 作为参数传递给 CompositionObject 的 StartAnimation 调用。
- 可以将其设置为 InteractionTracker 惯性修饰符的 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);