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

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

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

簡而言之，實現(xiàn)逐幀動畫需要兩個條件： (1)相關(guān)聯(lián)的不同圖像，即動畫幀；(2)連續(xù)播放。

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

(圖片來源： 知乎 )

前端逐幀動畫實現(xiàn)方案

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

其實不外乎三種技術(shù)(視頻可以實現(xiàn)所有類型的動畫，暫不納入)：gif、JavaScript、CSS3 Animation。

前文提到，實現(xiàn)逐幀動畫需要兩個條件：(1)動畫幀；(2)連續(xù)播放。

下面我們仔細(xì)自己分析下這三種技術(shù)是怎么實現(xiàn)上述條件的：

(1)gif

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

gif 可以有多個動畫幀，連續(xù)播放是其自身屬性，是否循環(huán)也是由其本身決定的。它往往用來實現(xiàn)小細(xì)節(jié)動畫，成本較低、使用方便。

但其缺點也是很明顯的： 畫質(zhì)上，gif 支持顏色少(最大256色)、Alpha 透明度支持差，圖像鋸齒毛邊比較嚴(yán)重；

交互上，不能直接控制播放、暫停、播放次數(shù)，靈活性差；

性能上，gif 會引起頁面周期性的 paint ，性能較差。

(2)JavaScript

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

不同的是， JS 是使用腳本來控制動畫的連續(xù)播放的 ： 可以直接改變元素的 background-image

也可以將動畫幀合并成雪碧圖，通過改變 background-position 來實現(xiàn)

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

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

.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}

.sprite-rice-1{background-position:-1800px 0}.sprite-rice-2{background-position:-900px -489px}….sprite-rice-19{background-position:-1200px 0}

使用 JS 的優(yōu)點是兼容性佳，交互靈活。

(3)CSS3 Animation

CSS3 實際上是使用 animation-timing-function 的階梯函數(shù) steps(number_of_steps, direction) 來實現(xiàn)逐幀動畫的連續(xù)播放的。

在移動端，CSS3 Animation 兼容性良好，相對于 JS，CSS3 逐幀動畫使用簡單，且效率更高，因為許多優(yōu)化都在瀏覽器底層完成。

因此在觸屏頁面中 CSS3 逐幀動畫使用廣泛，下文將對其進(jìn)行詳細(xì)介紹。

CSS3 逐幀動畫的實現(xiàn)

(1)將動畫幀合并為雪碧圖

在觸屏頁面中，動畫往往承擔(dān)頁面樣式實現(xiàn)的角色(即不需要替換)，因此我們會將圖片放到元素的背景中( background-image )。

逐幀動畫有不同的動畫幀，我們可以通過更改 background-image 的值實現(xiàn)幀的切換，但多張圖片會帶來多個 HTTP 請求，且不利于文件的管理。

比較合適的做法，是將所有的動畫幀合并成一張雪碧圖(sprite)，通過改變 background-position 的值來實現(xiàn)動畫幀切換。因此，逐幀動畫也被稱為“精靈動畫(sprite animation)”。

以京東到家的觸屏頁面 《年貨送到家》 為例：

這個動畫一個有三幀，將3個動畫幀合并，并放到 .p8 .page_key 的背景中：

.p8 .page_key { position: absolute; width: 572px; height: 586px; background-image: url("../img/p8.png");}

(2)使用 steps 實現(xiàn)動畫播放

steps 指定了一個階梯函數(shù)，包含兩個參數(shù)： 第一個參數(shù)指定了函數(shù)中的間隔數(shù)量(必須是正整數(shù))；

第二個參數(shù)可選，指定在每個間隔的起點或是終點發(fā)生階躍變化，接受 start 和 end 兩個值，默認(rèn)為 end。

(參考自 W3C )

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

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

@-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 ：

.p8 .page_key{-webkit-animation: p8 steps(1,end) 1.5s infinite;}

為什么第一個參數(shù)是1？

前文中提到，steps 是 animation-timing-function 的一個屬性值，在 W3C 中有如下說明：

For a keyframed animation, the ‘a(chǎn)nimation-timing-function’ applies between keyframes, not over the entire animation.

也就是說， animation-timing-function 應(yīng)該于兩個 keyframes 之間，而非整個動畫。在上面的 keyframes 中，我們已經(jīng)把每個幀都寫出來了，所以兩個 keyframes 之間的間隔是1。

更加簡便的寫法？

既然說 steps 第一個參數(shù)是指函數(shù)的間隔數(shù)量，那么我們就可以把 keyframes 的計算直接交給 steps 來完成。

.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 函數(shù)， animation-timing-function 還有兩個與逐幀動畫相關(guān)的屬性值 step-start 與 step-end ： step-start 等同于 steps(1,start) ：動畫執(zhí)行時以開始端點為開始；

step-end 等同于 steps(1,end) ：動畫執(zhí)行時以結(jié)尾端點為開始。

(2)動畫幀的計算：

$spriteWidth: 140px; // 精靈寬度 @keyframes ani { 100% { background-position: -($spriteWidth * 12) 0; // 12幀 }}

(3)適配方案：rem+scale

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

那么在觸屏頁中，如何實現(xiàn)頁面的適配？

這里小編提供一個思路： 非逐幀動畫部分，使用 rem 做單位；

逐幀動畫部分，使用 px 做單位，再結(jié)合 js 對動畫部分使用 scale 進(jìn)行縮放。

聲明：本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！如有疑問，請聯(lián)系admin@php.cn處理

總結(jié)

以上是生活随笔為你收集整理的html逐帧动画,CSS3动画之逐帧动画_html/css_WEB-ITnose的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。