[UWP]使用SpringAnimation創建有趣的動畫

原創

2019-12-31 13:29

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 <br/> Period = 50 ms	Damping Ratio = 0.85 <br/> Period = 50 ms	Damping Ratio = 0.65 <br/> Period = 60 ms
Scale/Size	Damping Ratio = 0.7 <br/> Period = 50 ms	Damping Ratio = 0.8 <br/> Period = 50 ms	Damping Ratio = 0.6 <br/> Period = 60 ms