最近寫一個H5要求序列幀動畫比較多，但是卻僅僅是作為裝飾，而不對其進行操作，為了減小記憶體以及更好的效能選擇了css動畫+css精靈圖的方式。

1.找工具製作css精靈圖。

    聽說Win系統的css sprite很好用，可惜mac系統不行，所以先安利大家一個外掛：gulp.spritesmith，用gulp作為構建工具，可以獲得css樣式檔案，css generator也行，但個人感覺這個更快，並且生成css檔案直接引用會特別方便。以下是程式碼：

var gulp = require('gulp')
var spritesmith = require('gulp.spritesmith')

gulp.task('sprite', function () {
  gulp.src('./images/*.png').pipe(spritesmith({
    imgName: 'images/main.png', //合成後的圖片命名
    cssName: 'css/main.css', //合成後的圖示樣式
    padding: 0, //雪碧圖中兩圖片的間距
    algorithm: 'binary-tree' //分為top-down、left-right、diagonal、alt-diagonal、binary-tree（可實際操作檢視區別）
  })).pipe(gulp.dest('assets')) //圖片、樣式輸出到該資料夾
});
 

記得安裝依賴。

執行gulp sprite後會在images資料夾下生成一張精靈圖，在css資料夾下生成對應的樣式檔案。

2.寫序列幀動畫

這裡運用到的最重要的就是animation中的steps函式。

先說下steps函式： steps 函式指定了一個階躍函式，第一個引數指定了時間函式中的間隔數量（必須是正整數）；第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。

假如你合成的圖片尺寸是100x4000，幀數是10，那麼你就可以這樣定義一個動畫：

@keyframes mainAnime {
  to {
    background-position: 0x -4000px;
  }
}
 

然後在樣式中使用：

animation: mainAnime steps(10) 1000ms infinite;

動畫就動起來了，可以節省很多空間及效能。

本文完。