[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是最重要的属性。

定义好这些属性后，可以将弹簧动画的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

DampingRatio

（偶尔使用全白背景也不错。）

4. 其它组合

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

FILM

利用两张现有的图像，创建一个动画。

下载

有兴趣的可以下载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