CSS3動畫之逐幀動畫
什麼是逐幀動畫
要了解 CSS3 逐幀動畫，首先要明確什麼是逐幀動畫。
看一下維基百科中的定義：
定格動畫，又名逐幀動畫，是一種動畫技術，其原理即將每幀不同的影象連續播放，從而產生動畫效果。
簡而言之，實現逐幀動畫需要兩個條件：（1）相關聯的不同影象，即動畫幀；（2）連續播放。
我們兒時的記憶，手翻書，他所實現的就是逐幀動畫：
逐幀動畫
（圖片來源：知乎）
前端逐幀動畫實現方案
在細聊 css3 逐幀動畫之前，我們先大致瞭解下前端實現逐幀動畫有哪些方案。
其實不外乎三種技術（視訊可以實現所有型別的動畫，暫不納入）：gif、JavaScript、CSS3 Animation。
前文提到，實現逐幀動畫需要兩個條件：（1）動畫幀；（2）連續播放。
下面我們仔細自己分析下這三種技術是怎麼實現上述條件的：
（1）gif
在觸屏頁中，gif 常被用來做載入動畫。如《陌陌不孤獨飯局》的載入動畫：
gif
gif 可以有多個動畫幀，連續播放是其自身屬性，是否迴圈也是由其本身決定的。它往往用來實現小細節動畫，成本較低、使用方便。
但其缺點也是很明顯的：
畫質上，gif 支援顏色少(最大256色)、Alpha 透明度支援差，影象鋸齒毛邊比較嚴重；
互動上，不能直接控制播放、暫停、播放次數，靈活性差；
效能上，gif 會引起頁面週期性的 paint ，效能較差。
（2）JavaScript
JS 與 CSS3，一般是將動畫幀放到背景圖中。
不同的是， JS 是使用指令碼來控制動畫的連續播放的：
可以直接改變元素的 background-image
也可以將動畫幀合併成雪碧圖，通過改變 background-position 來實現
還是《陌陌不孤獨飯局》的例子：
其中有一個伸手取飯盒的動畫，一共有19幀，且在第11幀處有一個互動，將雪碧圖放入背景中，通過不同的樣式實現不同的 background-position ，使用 JS 改變樣式名：
1
2
3
4
5
6
7
.sprite-rice-1,
.sprite-rice-2,
…
.sprite-rice-19{
background-image:url(http://7xnvb2.com2.z0.glb.qiniucdn.com/img/rice.jpg); background-repeat:no-repeat
}
1
2
3
4
.sprite-rice-1{background-position:-1800px 0}
.sprite-rice-2{background-position:-900px -489px}
…
.sprite-rice-19{background-position:-1200px 0}
sprite
使用 JS 的優點是相容性佳，互動靈活。
（3）CSS3 Animation
CSS3 實際上是使用 animation-timing-function 的階梯函式 steps(number_of_steps, direction) 來實現逐幀動畫的連續播放的。
在移動端，CSS3 Animation 相容性良好，相對於 JS，CSS3 逐幀動畫使用簡單，且效率更高，因為許多優化都在瀏覽器底層完成。
因此在觸屏頁面中 CSS3 逐幀動畫使用廣泛，下文將對其進行詳細介紹。
CSS3 逐幀動畫的實現
（1）將動畫幀合併為雪碧圖
在觸屏頁面中，動畫往往承擔頁面樣式實現的角色（即不需要替換），因此我們會將圖片放到元素的背景中（background-image）。
逐幀動畫有不同的動畫幀，我們可以通過更改 background-image 的值實現幀的切換，但多張圖片會帶來多個 HTTP 請求，且不利於檔案的管理。
比較合適的做法，是將所有的動畫幀合併成一張雪碧圖（sprite），通過改變 background-position 的值來實現動畫幀切換。因此，逐幀動畫也被稱為“精靈動畫（sprite animation）”。
以京東到家的觸屏頁面《年貨送到家》為例：
這個動畫一個有三幀，將3個動畫幀合併，並放到 .p8 .page_key 的背景中：
1
2
3
4
5
6
.p8 .page_key {
position: absolute;
width: 572px;
height: 586px;
background-image: url("../img/p8.png");
}
（2）使用 steps 實現動畫播放
steps 指定了一個階梯函式，包含兩個引數：
第一個引數指定了函式中的間隔數量（必須是正整數）；
第二個引數可選，指定在每個間隔的起點或是終點發生階躍變化，接受 start 和 end 兩個值，預設為 end。
（參考自W3C）
通過W3C中的這張圖片來理解 steps 的工作機制：
steps
回到上述的例子，我們在 keyframes 中定義好每個動畫幀：
1
2
3
4
5
6
@-webkit-keyframes p8{
0%{background-position: 0 0;}
33.33%{background-position: 0 -586px;}
66.66%{background-position: 0 -1172px;}
100%{background-position: 0 -1758px;}
}
然後，給他加上 animation：
1
2
3
.p8 .page_key{
-webkit-animation: p8 steps(1,end) 1.5s infinite;
}
為什麼第一個引數是1？
前文中提到，steps 是 animation-timing-function 的一個屬性值，在 W3C 中有如下說明：
For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.
也就是說，animation-timing-function 應該於兩個 keyframes 之間，而非整個動畫。在上面的 keyframes 中，我們已經把每個幀都寫出來了，所以兩個 keyframes 之間的間隔是1。
更加簡便的寫法？
既然說 steps 第一個引數是指函式的間隔數量，那麼我們就可以把 keyframes 的計算直接交給 steps 來完成。
1
2
3
4
5
6
.p8 .page_key{
-webkit-animation: p8 steps(3,end) 1.5s infinite;
}
@-webkit-keyframes p8 {
100% {background-position: 0 -1758px;}
}
以上兩種寫法效果是等同的。
CSS3 逐幀動畫使用技巧
（1）step-start 與 step-end
除了 steps 函式，animation-timing-function 還有兩個與逐幀動畫相關的屬性值 step-start 與 step-end：
step-start 等同於 steps(1,start)：動畫執行時以開始端點為開始；
step-end 等同於 steps(1,end)：動畫執行時以結尾端點為開始。
（2）動畫幀的計算：
1
2
3
4
5
6
$spriteWidth: 140px; // 精靈寬度
@keyframes ani {
100% {
background-position: -($spriteWidth * 12) 0; // 12幀
}
}
（3）適配方案：rem+scale
我們知道，rem 的計算會存在誤差，因此使用雪碧圖時我們並不推薦用 rem。如果是逐幀動畫的話，由於計算的誤差，會出現抖動的情況。
那麼在觸屏頁中，如何實現頁面的適配？
這裡小編提供一個思路：
非逐幀動畫部分，使用 rem 做單位；
逐幀動畫部分，使用 px 做單位，再結合 js 對動畫部分使用 scale 進行縮放。
感謝您的閱讀，本文由 凹凸實驗室 版權所有。如若轉載，請註明出處：凹凸實驗室（https://aotu.io/notes/2016/05... ）