什么是逐幀動畫

要了解 CSS3 逐幀動畫，首先要明確什么是逐幀動畫。

看一下維基百科中的定義：

定格動畫，又名逐幀動畫，是一種動畫技術，其原理即將每幀不同的圖像連續播放，從而產生動畫效果。

簡而言之，實現逐幀動畫需要兩個條件：（1）相關聯的不同圖像，即動畫幀；（2）連續播放。

我們兒時的記憶，手翻書，他所實現的就是逐幀動畫：

（圖片來源：知乎）

前端逐幀動畫實現方案

在細聊 css3 逐幀動畫之前，我們先大致了解下前端實現逐幀動畫有哪些方案。

其實不外乎三種技術（視頻可以實現所有類型的動畫，暫不納入）：gif、JavaScript、CSS3 Animation。

前文提到，實現逐幀動畫需要兩個條件：（1）動畫幀；（2）連續播放。

下面我們仔細自己分析下這三種技術是怎么實現上述條件的：

（1）gif

在觸屏頁中，gif 常被用來做加載動畫。如《陌陌不孤獨飯局》的加載動畫：

gif 可以有多個動畫幀，連續播放是其自身屬性，是否循環也是由其本身決定的。它往往用來實現小細節動畫，成本較低、使用方便。

但其缺點也是很明顯的：

  • 畫質上，gif 支持顏色少(最大256色)、Alpha 透明度支持差，圖像鋸齒毛邊比較嚴重；
  • 交互上，不能直接控制播放、暫停、播放次數，靈活性差；
  • 性能上，gif 會引起頁面周期性的 paint ，性能較差。

（2）JavaScript

JS 與 CSS3，一般是將動畫幀放到背景圖中。

不同的是，?JS 是使用腳本來控制動畫的連續播放的：

  • 可以直接改變元素的?background-image
  • 也可以將動畫幀合并成雪碧圖，通過改變?background-position?來實現

還是《陌陌不孤獨飯局》的例子：

其中有一個伸手取飯盒的動畫，一共有19幀，且在第11幀處有一個交互，將雪碧圖放入背景中，通過不同的樣式實現不同的?background-position?，使用 JS 改變樣式名：

使用 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?的背景中：

（2）使用 steps 實現動畫播放

steps 指定了一個階梯函數，包含兩個參數：

  • 第一個參數指定了函數中的間隔數量（必須是正整數）；
  • 第二個參數可選，指定在每個間隔的起點或是終點發生階躍變化，接受 start 和 end 兩個值，默認為 end。

（參考自W3C）

通過W3C中的這張圖片來理解 steps 的工作機制：

回到上述的例子，我們在 keyframes 中定義好每個動畫幀：

為什么第一個參數是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 來完成。

以上兩種寫法效果是等同的。

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）動畫幀的計算：

（3）適配方案：rem+scale

我們知道，rem 的計算會存在誤差，因此使用雪碧圖時我們并不推薦用 rem。如果是逐幀動畫的話，由于計算的誤差，會出現抖動的情況。

那么在觸屏頁中，如何實現頁面的適配？

這里小編提供一個思路：

  • 非逐幀動畫部分，使用?rem?做單位；
  • 逐幀動畫部分，使用?px?做單位，再結合?js?對動畫部分使用?scale?進行縮放。