[UWP]使用SpringAnimation创建有趣的动画
1. 什么是自然动画#
最近用弹簧动画（SpringAnimation）做了两个番茄钟，关于弹簧动画官方文档已经介绍得够详细了，这篇文章就摘录一些官方文档核心内容。
在传统UI中，关键帧动画（KeyFrameAnimation）是描述运动的主要方式。关键帧为设计人员和开发人员提供了尽可能多的用于定义开始、结束和内插的方式。虽然这在许多情况下非常有用，但关键帧动画动态性不够，其运动没有适应性，在任何情况下都具有相同的外观。
在上图的另一端是物理引擎，它能提供更为鲜活和动态的动画，但设计人员和开发人员对它的控制力较少，因此很难集成到传统UI中。
自然动画(NaturalMotionAnimation) 旨在帮助衔接起这种分离的状况，实现控制力和运动之间的平衡，对于重要的动画元素（如开始/完成）具有控制力，又能保持运动的自然和动态。
2. 什么是弹簧动画#
从 Fall Creators Update 开始UWP引入了一种新的动画：弹簧动画（SpringAnimation）。 相对于传统的贝塞尔曲线动画，弹簧的运动不稳定，这通常会为观察它的人带来有趣而令人愉快的情绪反应。它公开以下功能：
Copy
• 定义开始和结束值。
• 使用 InteractionTracker 定义 InitialVelocity 并绑定到输入。
• 定义特定于运动的属性（如弹簧的 DampingRatio。）
具体来说：
Copy
• 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的函数：
Copy
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
作者：Dino.C
出处：https://www.cnblogs.com/dino623/p/create-animation-using-SpringAnimation.html
本站使用「署名 4.0 国际」创作共享协议，转载请在文章明显位置注明作者及出处。https://www.cnblogs.com/dino623/p/create-animation-using-SpringAnimation.html