css精靈圖寫序列幀動畫

     最近寫一個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;

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

本文完。