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 = https://www.cnblogs.com/dino623/p/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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1698.html
標籤：UWP