1. 什麼是自然動畫 最近用彈簧動畫（SpringAnimation）做了兩個番茄鐘，關於彈簧動畫官方文檔已經介紹得夠詳細了，這篇文章就摘錄一些官方文檔核心內容。 在傳統UI中，關鍵幀動畫（KeyFrameAnimation）是描述運動的主要方式。關鍵幀為設計人員和開發人員提供了儘可能多的用於定義開 ...
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
