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;

动画就动起来了，可以节省很多空间及性能。

本文完。