CSS3動畫之補間動畫

註：本文最初發表於凹凸實驗室·拇指期刊第8期-CSS3動畫開發指南。前7期請移步往期回顧（第7期可見專欄過往文章）。

補間動畫是動畫的基礎形式之一，指的是人為設定動畫的關鍵狀態，也就是關鍵幀，而關鍵幀之間的過渡過程只需要由計算機處理渲染的一種動畫形式。

在觸屏頁面中，常見的實現補間動畫有幾種形式。

第一，CSS3 Animation。

通過animation(除steps()以外的時間函數)屬性在每個關鍵幀之間插入補間動畫。

第二，CSS3 Transition。

區別於animation，transition只能設定初始和結束時刻的兩個關鍵幀狀態。

第三，利用JavaScript實現動畫，例如JavaScript動畫庫或框架，著名的TweenJS，它是CreateJS的其中一個套件。另外，在Flash業界久負盛名的GreenSock推出的GSAP(GreenSock Animation Platform)也新引入了對Javascript動畫的支持。

第四，SVG 動畫。

基於移動端對SVG技術的友好的支持性，利用SVG技術實現動畫也是一種可行的方案。

對於利用Transition實現的動畫而言，是有一定局限的。

引述阮一峰老師的文章里的總結，

transition的優點在於簡單易用，但是它有幾個很大的局限。

（1）transition需要事件觸發，所以沒法在網頁載入時自動發生。

（2）transition是一次性的，不能重複發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

囿於這樣的局限，在觸屏頁面中很少見到Transition動畫的身影，但是並不意味著沒有，譬如翻頁動畫的實現可以利用Javascript腳本配合transition與transform屬性來實現。

（案例來源於《京東：2015JDC燃爆事件》）

（Chrome調試代碼截圖）

所以，利用CSS3實現動畫的重頭戲都在於Animation的運用。

然而想寫好CSS3 Animation 動畫，則是看似簡單實則需要把握好細節的活兒，

第一，動畫過程要預先規劃好，不是敲敲腦殼就能碼出來的事兒。

可以是一張把與設計師溝通的結果加之分析輸出一張動畫屬性分解表。

(動畫屬性分解表示例，來源於《常見動效製作手法》)

又或者是根據溝通分析規划出來的動畫時間軸。

(動畫時間軸，來源於《CSS3動畫實踐》)

第二，動畫要自然不生硬。

不管是在影視動畫界，還是前端動畫界里遵循的都是同一套配方，追求同樣的味道——「迪士尼九老」總結的十二黃金動畫法則（以下簡稱「十二法則」），一直沿用至今、備受推崇不是沒有道理的。

在一些優秀的觸屏頁面案例里，可以追尋到它的蹤跡。

《騰訊：微眾銀行》中摩托車demo中對輪子和摩托車的處理就體現出「擠壓和拉伸」的法則，帶出顛簸的現實感。

小編是非常推薦大家去認真研究這個案例的，因為作者陳在真就此說明過他的這部作品就完全是遵循迪士尼動畫十二原則所碼出來的，但是案例已經下線了。

不過，你還可以欣賞到另一位對迪士尼十二法則同樣有心得的大神EC的作品《拍拍小店全新上線》。

盒子的打開過程就帶有一個往上展開預備動作(ANTICIPATION)，並且展開撒開的碎彩紙帶有慢出(SLOW OUT)的效果，拍拍小店的logo彈出符合弧形(ARCS)的運動軌跡。

除此之外弧形運動軌跡最為明顯的地方就是頁面切換的過程。

整個案例處處都非常生動自然、利落感滿滿，令人讚歎。

如果你想了解怎麼去實現才能夠符合十二法則，可以進一步閱讀《The Guide To CSS Animation: Principles and Examples》這篇文章喔，不謝。

另外，在把控十二法則時為了動畫更加自然，時間函數(animation-timing-function)的設計絕對是舉足輕重的一環，因為動畫可以說是一種關於時間函數的運動演變過程。要碼好動畫，這篇關注介紹緩動函數的《讓界面動畫更自然》說不定能夠助你一臂之力。

碼好了動畫，做好了頁面，以為就此結束了嗎？不要太天真，移動端對性能的要求也是一道需要邁過的坎兒。

Google在有關動畫性能渲染優化的文章（對不起，這裡有道牆）中提出建議，避免為開銷大的屬性設置動畫，要讓每次在設置動畫時必須注意保持 60fps。

那麼，哪些是開銷大的屬性呢？（下面是科普環節，清楚的童鞋可以跳過）。

頁面渲染的一般過程為JS / CSS > 計算樣式 > 布局 > 繪製 > 渲染層合併。

其中，Layout(重排)和Paint(重繪)是整個環節中最為耗時的兩環，所以我們盡量避免著這兩個環節。從性能方面考慮，最理想的渲染流水線是沒有布局和繪製環節的，只需要做渲染層的合併即可。

那怎麼知道哪些CSS屬性的改變是會影響這兩個環節的呢？諾，下面就是各CSS屬性與其影響的環節。

這裡截取部分，更為詳細地翻牆去CSS Triggers拿吧

在實際的應用里，最為簡單的一個注意點就是，觸發動畫的開始不要用diaplay:none屬性值，因為它會引起Layout、Paint環節，通過切換類名就已經是一種很好的辦法。

還有就是，translate屬性值來替換top/left/right/bottom的切換，scale屬性值替換width/height，opacity屬性替換display/visibility等等。

除此之外，對動畫渲染的優化還有其他方式，上面貼出Google文章鏈接就有一系列的文章解讀，小編就不賣弄按下不表了，這裡順便拋出前輩對這方面相關的總結：

（總結來源於@登平登平的《H5動畫60fps之路》）

最後總結下要點就是，事先做好規劃，碼的時候注意十二法則，謹記避免導致layout/paint的屬性，搞定！

最後的最後，由於本文主推的是CSS3 Animation，其餘的實現方式不在討論範圍內：P，拜拜，下次再見。

（小編：Tin）

--------------------------------------------------------------------------------------------------------------

拇指期刊·第8期·CSS3動畫開發手冊

《CSS3動畫之補間動畫》

《CSS3動畫之逐幀動畫》

《CSS3動畫之3D動畫》
推薦閱讀：