《CSS Secrets》是@Lea Verou最新著作，這本書講解了有關(guān)于CSS中一些小秘密。是一本CSSer值得一讀的一本書，經(jīng)過一段時(shí)間的閱讀，我、@南北和@彥子一起將在W3cplus發(fā)布一系列相關(guān)的讀后感，與大家一起分享。

問題

通常，我們需要一個(gè)動畫效果是比較難的或者說使用CSS的transition是不可能實(shí)現(xiàn)的。例如，一個(gè)卡通移動或一個(gè)復(fù)雜的進(jìn)度條。在這種情況下，基于圖像的逐幀動畫是完美的，但是實(shí)現(xiàn)這種效果是具有挑戰(zhàn)性的。

在這一點(diǎn)上，你可能會說：難道我們不能使用gif動畫？很多情況下，答案是肯定的，gif動畫是完美的。然而，他們也有一些缺點(diǎn)，可能在一些地方無法使用：

所有幀中被限制使用256色調(diào)色板

他們不能具有透明度，這是一個(gè)很大的問題。例如，下圖所示的效果是很常見的。

在CSS中有些方面無法做修改，比如時(shí)間、重復(fù)和停頓等等。一旦生成gif文件，一切都存在文件中，只能通過一個(gè)圖像編輯器來做修改或生成另一個(gè)文件。

上圖是一個(gè)半透明的進(jìn)度指示器(dabblet.com),這個(gè)是Gif圖無法實(shí)現(xiàn)的效果。

早在2004年，Mozilla團(tuán)隊(duì)就解決了前兩個(gè)問題，他們通過逐幀動畫PNG文件，實(shí)現(xiàn)類似靜態(tài)的方式或者動畫的GIF文件。他們把這種設(shè)計(jì)稱為APNG。但是，直到今天，支持APNG的瀏覽器和制圖軟件都非常有限。

開發(fā)人員甚至通過使用一個(gè)Sprite圖和使用JavaScript腳本來動態(tài)更改background-position值，在瀏覽器中實(shí)現(xiàn)靈活的逐幀動畫。你甚至可以找到一個(gè)小的庫來完成，那么有沒有一個(gè)簡單的方法，使用CSS來實(shí)現(xiàn)這樣的效果呢？

解決方案

假設(shè)我們所有幀動畫用到的Sprites的PNG圖如下所示：

我們有一個(gè)元素，用來制作加載動畫(別忘了，在元素里面放些文本，提搞可訪性！)，元素大小是單幀動畫的尺寸：

Loading...

.loader {

width: 100px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

text-indent: 999px;

overflow: hidden;

background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1507/loader.png) 0 0;

}

目前結(jié)果如下圖所示：

將顯示的是第一幀，但是沒有動畫效果。如果我們對background-position進(jìn)行不同值的設(shè)置，比如-100px,0是第二幀，-200px 0是第三幀等等。這樣一來，首先想到的他可能是一個(gè)動畫：

@keyframes loader {

to { background-position: -800px 0; }

}

.loader {

animation: loader 1s infinite linear;

/*省略其他樣式*/

}

然而，正如下圖所看到的圖片(每167ms),這并不是真正需要的效果：

當(dāng)我們不需要關(guān)鍵幀之間的插值時(shí)，我們最初嘗試的逐幀動畫效果失敗了。

雖然我們還沒有實(shí)現(xiàn)逐幀動畫效果，但實(shí)際上我們已經(jīng)非常接近解決方案。這里有一個(gè)秘密，將使用steps()時(shí)間函數(shù)來替代前面介紹的“Be?zier-based”時(shí)間函數(shù)。

你可能會問，這是什么時(shí)間函數(shù)？正如上一節(jié)介紹的，我們看到的都是有關(guān)于“Be?zier-based”時(shí)間函數(shù)來控制關(guān)鍵幀之間的平滑過渡。通常情況之下，在transition和animation都可以實(shí)現(xiàn)平滑過渡。然而，在這種情況這下，這種平滑過渡時(shí)間函數(shù)直接摧毀了我們使用Sprite制作的動畫。

steps()時(shí)間函數(shù)和“Be?zier-based”很不一樣，他可以根據(jù)整個(gè)動畫的關(guān)鍵幀步驟指定步驟的數(shù)量，并且可以對插值進(jìn)行開關(guān)的設(shè)置。在CSS中，有關(guān)于steps()討論不太多。至于CSS中有關(guān)于時(shí)間函數(shù)功能，“Be?zier-based”才是親媽的生，很受歡迎，但steps()是后媽的，一直不受人待。然而，在這種情況下，steps()才正是我們需要的。一旦把這個(gè)用到加載的動畫中，動畫才變得正常，也是我們需要的效果：

animation: loader 1s infinite steps(8);

請記住，steps()還可以接受第二個(gè)參數(shù)，而且這個(gè)參數(shù)是可選的。start或end(默認(rèn)的)，用來設(shè)定每個(gè)時(shí)間間隔開關(guān)，如下圖所示：

如果我們只需要一個(gè)步驟，也可以通過step-start和step-end快捷鍵，其相當(dāng)于steps(1,start)和steps(1,end)。

提示：Simurai給Sprites動畫提供了一個(gè)使用steps()技術(shù)。

總結(jié)

以上是生活随笔為你收集整理的html逐帧动画,CSS秘密花园： 逐帧动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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