[UWP]使用SpringAnimation创建有趣的动画

1. 什么是自然动画

最近用弹簧动画（SpringAnimation）做了两个番茄钟，关于弹簧动画官方文档已经介绍得够详细了，这篇文章就摘录一些官方文档核心内容。

在传统UI中，关键帧动画（KeyFrameAnimation）是描述运动的主要方式。关键帧为设计人员和开发人员提供了尽可能多的用于定义开始、结束和内插的方式。虽然这在许多情况下非常有用，但关键帧动画动态性不够，其运动没有适应性，在任何情况下都具有相同的外观。

在上图的另一端是物理引擎，它能提供更为鲜活和动态的动画，但设计人员和开发人员对它的控制力较少，因此很难集成到传统UI中。

自然动画(NaturalMotionAnimation) 旨在帮助衔接起这种分离的状况，实现控制力和运动之间的平衡，对于重要的动画元素（如开始/完成）具有控制力，又能保持运动的自然和动态。

2. 什么是弹簧动画

从 Fall Creators Update 开始UWP引入了一种新的动画：弹簧动画（SpringAnimation）。相对于传统的贝塞尔曲线动画，弹簧的运动不稳定，这通常会为观察它的人带来有趣而令人愉快的情绪反应。它公开以下功能：

• 定义开始和结束值。

• 使用 InteractionTracker 定义 InitialVelocity 并绑定到输入。

• 定义特定于运动的属性（如弹簧的 DampingRatio。）

具体来说：

• DampingRatio – 表示在动画中使用的弹簧运动的阻尼级别。

• Period – 弹簧执行单次振荡所花费的时间。

• Final、Starting Value – 定义弹簧运动的开始和结束位置（如果未定义，则开始值和最终值将是当前值）。

• Initial Velocity – 运动的编程初始速度。

其中DampingRatio是最重要的一个属性

Damping Ratio Value	描述
DampingRatio = 0	Undamped – 弹簧将振荡很长时间
0 < DampingRatio < 1	Criticallydamped – 弹簧不会振荡
DampingRatio = 1	Criticallydamped – 弹簧不会振荡
DampingRation > 1	Overdamped – 弹簧将通过突然减速而不振荡快速到达其目的地

定义好这些属性之后，可以将弹簧动画的 NaturalMotionAnimation 传入 CompositionObject 的 StartAnimation 或 InteractionTracker InertiaModifier 的 Motion 属性。

3. 使用弹簧动画

使用弹簧动画的代码和一般合成动画很相似，只需要将动画改为名字带Spring的函数：

var springAnimation = _compositor.CreateSpringVector3Animation();

springAnimation.DampingRatio = 0.5f;

springAnimation.Period = TimeSpan.FromMilliseconds(200);

springAnimation.FinalValue = new Vector3(offset, 0);

visual.StartAnimation(nameof(visual.Offset), springAnimation);

上面的代码定义了一个位移的Spring动画，效果如下：

将Period改为50毫秒，DampingRatio改为0.85f，效果如下：

（又到了用白色背景的季节，偶尔用用全白背景也不错。）

4. 其它组合

在对 Offset 和 Scale/Size 进行动画处理的常见情况下，Windows 设计团队为不同类型的弹簧的 DampingRatio 和 Period 推荐了以下值：

Property	Normal Spring	Dampened Spring	Less-Dampened Spring
Offset	Damping Ratio = 0.8 Period = 50 ms	Damping Ratio = 0.85 Period = 50 ms	Damping Ratio = 0.65 Period = 60 ms
Scale/Size	Damping Ratio = 0.7 Period = 50 ms	Damping Ratio = 0.8 Period = 50 ms	Damping Ratio = 0.6 Period = 60 ms

有兴趣的可以下载Xaml-Controls-Gallery试试这些组合:

5. 结语

上面的动画可以安装我的番茄钟应用试玩一下，安装地址：

一个番茄钟

弹簧动画真是好玩到停不下来。如果和用户的输入关联，运动还能够根据最终用户的速度相应调节适应，这部分在官方文档有详细例子，因为我的番茄钟应用没什么必要做这功能就没深入研究了，有兴趣可以看看官方文档。

6. 参考

弹簧动画 - Windows UWP applications Microsoft Docs

自然运动动画 - Windows UWP applications Microsoft Docs

NaturalMotionAnimation Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

KeyFrameAnimation Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

microsoft_Xaml-Controls-Gallery

7. 源码

SpringTextView.xaml.cs at master

KonosubaView.xaml.cs at master