標籤:

CSS3動畫之逐幀動畫

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

什麼是逐幀動畫

要了解 CSS3 逐幀動畫,首先要明確什麼是逐幀動畫。

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

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

簡而言之,實現逐幀動畫需要兩個條件:(1)相關聯的不同圖像,即動畫幀;(2)連續播放。

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

(圖片來源:知乎)

前端逐幀動畫實現方案

前端實現逐幀動畫,不外乎三種技術(視頻可以實現所有類型的動畫,暫不納入):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 中定義好每個動畫幀:

然後,給他加上 animation:

為什麼第一個參數是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 進行縮放。

小編:Yetty

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

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

《CSS3動畫之補間動畫》

《CSS3動畫之逐幀動畫》

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

CSS 那麼多屬性,而且每個屬性都有多個值怎麼記?
CSS 3 Flex 全解【視頻】
有哪些好方法能處理 display: inline-block 元素之間出現的空格?
在把a, span等標籤做成Button按鈕樣式時,為什麼和普通button高度差一個像素?

TAG:CSS3 | 動畫 |