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