最近写一个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