在 Web 動畫方面，有一套非常經典的原則 -- Twelve basic principles of animation，也就是關於動畫的 12 個基本原則（也稱之為迪士尼動畫原則），網上對它的解讀延伸的文章也非常之多：
其中使用的示例 DEMO 屬於比較簡單易懂，但是沒有很好地體現在實際生產中應該如何靈活運用。今天本文將帶大家再次複習複習，並且替換其中的最基本的 DEMO，換成一些到今天非常實用，非常酷炫的動畫 DEMO 效果。
Squash and stretch -- 擠壓和拉伸
擠壓和拉伸的目的是為繪製的物件賦予重量感和靈活性。它可以應用於簡單的物體，如彈跳球，或更復雜的結構，如人臉的肌肉組織。
應用在動畫中，這一原則最重要的方面是物件的體積在被擠壓或拉伸時不會改變。如果一個球的長度被垂直拉伸，它的寬度（三個維度，還有它的深度）需要相應地水平收縮。
看看上面這張圖，很明顯右邊這個運動軌跡要比左邊的真實很多。
原理動畫如下：
類似的一些比較有意思的 Web 動畫 DEMO：
CodePen Demo -- CSS Flippy Loader ? By Jhey
仔細看上面這個 Loading 動畫，每個塊在跳起之前都會有一個壓縮準備動作，在壓縮的過程中高度變低，寬度變寬，這就是擠壓和拉伸，讓動畫看上去更加真實。
OK，再看兩個類似的效果，加深下印象：
CodePen Demo -- CSS Loading Animation
CodePen Demo -- CSS Animation Loader - Jelly Box
簡單總結一下，擠壓和拉伸的核心在於保持物件的體積一致，當拉伸元素時，它的寬度需要變薄，而當擠壓元素時，它的寬度需要變寬。
Anticipation -- 預備動作
準備動作用於為主要的動畫動作做好準備，並使動作看起來更逼真。
譬如從地板上跳下來的舞者必須先彎曲膝蓋，揮杆的高爾夫球手必須先將球杆向後揮動。
原理動畫如下，能夠看到滾動之前的一些準備動作：
看看一些實際應用的chang場景，下面這個動畫效果：
CodePen Demo -- Never-ending box By Pawel
小球向上滾動，但是仔細看的話，每次向上滾動的時候都會先向後襬一下，可以理解為是一個蓄力動作，也就是我們說的準備動作。
類似的，看看這個購物車動畫，運用了非常多的小技巧，其中之一就是，車在向前衝之前會後退一點點進行一個蓄力動作，整個動畫的感覺明顯就不一樣，它讓動畫看起來更加的自然：
Staging -- 演出佈局
Staging 意為演出佈局，它的目的是引導觀眾的注意力，並明確一個場景中什麼是最重要的。
可以通過多種方式來完成，例如在畫面中放置角色、使用光影，或相機的角度和位置。該原則的本質是關注核心內容，避免其他不必要的細節吸引走使用者的注意力。
原理動畫如下：
上述 Gif 原理圖效果不太明顯，看看示例效果：
CodePen Demo -- CSS Loading Animation
該技巧的核心就是在動畫的過程中把主體凸顯，把非主體元素通過模糊、變淡等方式弱化其效果，降低使用者在其之上的注意力。
Straight-Ahead Action and Pose-to-Pose -- 連續運動和姿態對應
其實表示的就是逐幀動畫和補間動畫：
-
FrameAnimation（逐幀動畫）：將多張圖片組合起來進行播放，可以利用 CSS Aniation 的 Steps，畫面由一幀一幀構成，類似於漫畫書
-
TweenAnimation（補間動畫）：補間動畫是在時間幀上進行關鍵幀繪製，不同於逐幀動畫的每一幀都是關鍵幀，補間動畫可以在一個關鍵幀上繪製一個基礎形狀，然後在時間幀上對另一個關鍵幀進行形狀轉變或繪製另一個形狀等，然後中間的動畫過程是由計算機自動生成。
這個應該是屬於最基礎的了，在不同場景下有不同的妙用。我們在用 CSS 實現動畫的過程中，使用的比較多的應該是補間動畫，逐幀動畫也很有意思，譬如設計師設計好的複雜動畫，利用多張圖片拼接成逐幀動畫也非常不錯。
逐幀動畫和補間動畫適用在不同的場合，沒有誰更好，只有誰更合適，比較下面兩個時鐘動畫，其中一個的秒針運用的是逐幀動畫，另外一個則是補間動畫：
- 時鐘秒針運用的是逐幀動畫：
CodePen Demo -- CSS3 Working Clock By Ilia
- 時鐘秒針運用的是補間動畫：
CodePen Demo -- CSS Rotary Clock By Jake Albaugh
有的時候一些複雜動畫無法使用 CSS 直接實現的，也會利用逐幀的效果近似實現一個補間動畫，像是蘋果這個耳機動畫，就是實際逐幀動畫，但是看起來是連續的：
CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen
這裡其實是多張圖片的快速輪播，每張圖片表示一個關鍵幀。
Follow through and overlapping action 跟隨和重疊動作
跟隨和重疊動作是兩種密切相關的技術的總稱，它們有助於更真實地渲染運動，並有助於給人一種印象，即運動的元素遵循物理定律，包括慣性原理。
- 跟隨意味著在角色停止後，身體鬆散連線的部分應該繼續移動，並且這些部分應該繼續移動到角色停止的點之外，然後才被拉回到重心或表現出不同的程度的振盪阻尼；
- 重疊動作是元素各部分以不同速率移動的趨勢（手臂將在頭部的不同時間移動等等）；
- 第三種相關技術是拖動，元素開始移動，其中一部分需要幾幀才能追上。
要創造一個重疊動作的感覺，我們可以讓元件以稍微不同的速度移動到每處。這是一種在 iOS 系統的視窗過渡中被運用得很好的方法。一些按鈕和元件以不同速率運動，整體效果會比全部東西以相同速率運動要更逼真，並留出時間讓訪客去適當理解變化。
原理示意圖：
看看下面這個購物車動畫，仔細看購物車，在移動到停止的過程中，有個很明顯的剎車再拉回的感覺，這裡運用到了跟隨的效果，讓動畫更加生動真實：
Slow In and Slow Out -- 緩入緩出
現實世界中物體的運動，如人體、動物、車輛等，需要時間來加速和減速。
真實的運動效果，它的緩動函式一定不是 Linear。出於這個原因，運動往往是逐步加速並在停止前變慢，實現一個慢進和慢出的效果，以貼近更逼真的動作。
示意圖：
這個還是很好理解的。真實世界中，很少有緩動函式是 Linear 的運動。
Arc -- 弧線運動
大多數自然動作傾向於遵循一個拱形軌跡，動畫應該遵循這個原則，遵循隱含的弧形以獲得更大的真實感。
原理示意圖：
嗯哼，在很多動畫中，使用弧線代替直線，能夠讓動畫效果更佳的逼真。看看下面這個煙花粒子動畫：
CodePen Demo -- Particles, humankind's only weakness By Rik Schennink
整個煙花粒子動畫看上去非常的自然，因為每個粒子的下落都遵循了自由落體的規律，它們的運動軌跡都是弧線而不是直線。
Secondary Action -- 次要動作
將次要動作新增到主要動作可以使場景更加生動，並有助於支援主要動作。走路的人可以同時擺動手臂或將手臂放在口袋裡，說話或吹口哨，或者通過面部表情來表達情緒。
原理示意圖：
簡單的一個應用例項，看看下面這個動畫：
CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram
這裡實現了一個潛艇向前遊動的畫面，動畫本身還有很多可以優化的地方。但也有一些值得學習肯定的地方，動畫使用了尾漿轉動和氣泡和海底景物移動。
同時，值得注意的是，視窗的反光也是一個很小的細節，表示船體在移動，這個就屬於一個次要動作，襯托出主體的移動。
再看看下面這列印動畫，鍵盤上按鍵的上上下下模擬了點選效果，其實也是個次要動作，襯托主體動畫效果：
CodePen Demo -- CSS Typewriter By Aaron Iker
Timing -- 時間節奏
時間是指給定動作的繪圖或幀數，它轉化為動畫動作的速度。
在純粹的物理層面上，正確的計時會使物體看起來遵守物理定律。例如，物體的重量決定了它對推動力的反應，因為重量輕的物體會比重量大的物體反應更快。
同一個動畫，使用不同的速率展示，其效果往往相差很多。對於 Web 動畫而言，可能只需要調整 animation-duration 或 transition-duration 的值。
原理示意圖：
可以看出，同個動畫，不同的緩動函式，或者賦予不同的時間，就能產生很不一樣的效果。
當然，時間節奏可以運用在很多地方，譬如在一些 Loading 動畫中：
CodePen Demo -- Only Css 3D Cube By Hisami Kurita
又或者是這樣，同個動畫，不同的速率：
CodePen Demo -- Rotating Circles Preloader
也可以是同樣的延遲、同樣的速率，但是不同的方向：
CodePen Demo -- 2020 SVG Animation By @keyframers
Exaggeration -- 誇張手法
誇張是一種對動畫特別有用的效果，因為力求完美模仿現實的動畫動作可能看起來是靜態和沉悶的。
使用誇張時，一定程度的剋制很重要。如果一個場景包含多個元素，則應平衡這些元素之間的關係，以避免混淆或嚇倒觀眾。
原理示意圖：
OK，不同程度的展現對效果的感官是不一樣的，對比下面兩個故障藝術動畫：
輕微晃動故障：
嚴重晃動故障：
CodePen Demo -- Glitch Animation
可以看出，第二個動畫明顯能感受到比第一個更嚴重的故障。
過多的現實主義會毀掉動畫，或者說讓它缺乏吸引力，使其顯得靜態和乏味。相反，為元素物件新增一些誇張，使它們更具活力，能夠讓它們更吸引眼球。
Solid drawing -- 紮實的描繪
這個原則表示我們的動畫需要尊重真實性，譬如一個 3D 立體繪圖，就需要考慮元素在三維空間中的形式。
瞭解掌握三維形狀、解剖學、重量、平衡、光影等的基礎知識。有助於我們繪製出更為逼真的動畫效果。
原理示意圖：
再再看看下面這個動畫，名為 Close the blinds -- 關上百葉窗：
CodePen Demo -- Close the blinds By Chance Squires
hover 的時候有一個關上動畫，使用多塊 div 模擬了百葉窗的落下，同時配合了背景色從明亮到黑暗的過程，很好的利用了色彩光影輔助動畫的展示。
再看看這個擺錘小動畫，也是非常好的使用了光影、視角元素：
CodePen Demo -- The Three-Body Problem By Vian Esterhuizen
最後這個 Demo，雖然是使用 CSS 實現的，但是也儘可能的還原模擬了現實中紙張飛舞的形態，並且對紙張下方陰影的變化也做了一定的變化：
CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers
好的動畫，細節是經得起推敲的。
Appeal -- 吸引力
一反往常，精美的細節往往能非常好的吸引使用者的注意力。
吸引力是藝術作品的特質，而如何實現有吸引力的作品則需要不斷的嘗試。
原理示意圖：
我覺得這一點可能是 Web 動畫的核心，一個能夠吸引人的動畫，它肯定是有某些特質的，讓我們一起來欣賞下。
CodePen Demo -- Download interaction By Milan Raring
通過一連串的動作，動畫展開、箭頭移動、進度條填滿、數字變化，把一個下載動畫展示的非常 Nice，讓人在等待的過程並不覺得枯燥。
再來看看這個視訊播放的效果：
CodePen Demo -- Video button animation - Only CSS
通過一個遮罩 hover 放大，再到點選全屏的變化，一下子就將使用者的注意力給吸引了過來。
Web 動畫的一些常見誤區
當然，上述的一些技巧源自於迪士尼動畫原則，我們可以將其中的一些思想貫穿於我們的 Web 動畫的設計之中。
但是，必須指出的是，Web 動畫本身在使用的時候，也有一些原則是我們需要注意的。主要有下面幾點：
- 增強動畫與頁面元素之間的關聯性
- 不要為了動畫而動畫，要有目的性
- 動畫不要過於緩慢，否則會阻礙互動
增強動畫與頁面元素之間的關聯性
這個是一個常見的問題，經常會看到一些動畫與主體之間沒有關聯性。關聯性背後的邏輯，能幫助使用者在介面佈局中理解剛發生的變化，是什麼導致了變化。
好的動畫可以做到將頁面的多個環節或者場景有效串聯。
比較下面兩個動畫，第二個就比第一個更有關聯性：
沒有強關聯性的：
有關聯性的：
很明顯，第二個動畫比第一個動畫更能讓使用者瞭解頁面發生的變化。
不要為了動畫而動畫，要有目的性
這一點也很重要，不要為了動畫而動畫，要有目的性，很多時候很多頁面的動畫非常莫名其妙。
emm，簡單一點來說就是單純的為了炫技而存在的動畫。這種動畫可以存在於你的 Demo，你的個人網站中，但不太適合用於線上業務頁面中。
使用動畫應該有明確的目的性，譬如 Loading 動畫能夠讓使用者感知到頁面正在發生變化，正在載入內容。
在我們的互動過程中，適當的增加過渡與動畫，能夠很好的讓使用者感知到頁面的變化。類似的還有一些滾動動畫。絲滑的滾動切換比突兀的內容明顯是更好的體驗。
動畫不要過於緩慢，否則會阻礙互動
緩慢的動畫，它產生了不必要的停頓。
一些使用者會頻繁看到它們的過渡動畫，儘可能的保持簡短。讓動畫持續時間保持在 300ms 或更短。
比較下面兩個動畫，第一次可能會讓使用者耳目一新，但是如果使用者在瀏覽過程中頻繁出現通過操作，過長的轉場動畫會消耗使用者大量不必要的時間：
過長的轉場動畫：
縮短轉場動畫時間，保持恰當的時長：
結合產品及業務的創意互動動畫
這一點是比較有意思的。我個人認為，Web 動畫做得好用的妙，是能非常好的提升使用者體驗，提升品牌價值的。
結合產品及業務的創意動畫，是需要挖掘，不斷打磨的不斷迭代的。譬如大家津津樂道的 BiliBili 官網，它的頂部 Banner，配合一些節日、活動，經常就會有出現一些有意思的創意互動動畫。簡單看兩個：
以及這個：
我非常多次在不同地方看到有人討論 Bilibili 的頂部 banner 動畫，可見它這塊的動畫是成功的。很好的結合了一些節日、實事、熱點，當成了一種比較固定的產品去不斷推陳出新，在不同時候給與使用者不同的體驗。
考慮動畫的價效比
最後一條，就是動畫雖好，但是打磨一個精品動畫是非常耗時的，尤其是在現在非常多的產品業務都是處於一種敏捷開發迭代之下。
一個好的 Web 動畫從構思到落地，絕非前端一個人的工作，需要產品、設計、前端等等相關人員公共努力， 不斷修改才能最終呈現比較好的效果。所以在專案初期，一定需要考慮好價效比，是否真的值得為了一個 Web 動畫花費幾天時間呢？當然這是一個非常見仁見智的問題。
參考文章
- 原理圖來源 -- Understand Disney's 12 principles of animation
- Animation Principles for the Web
- [譯文]網頁動畫的十二原則
- Twelve basic principles of animation
- 功能性動畫設計：優秀的轉場效果
最後
想使用 Web 技術繪製生動有趣的動畫並非易事，尤其在現在國內的大環境下，鮮有人會去研究動畫原則，並運用於實踐生產之中。但是它本身確實是個非常有意思有技術的事情。希望本文能給大夥對 Web 動畫的認知帶來一些提升和幫助，在後續的工作中多少運用一些。
好了，本文到此結束，希望對你有幫助 ?
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。