css精灵列表使用实例,介绍一个导出CSS精灵图动画的AE小脚本

作者：李威

在H5项目中如果有动画需求，一个常见的流程是设计师用 After Effect 制作动画，然后导出为序列帧。

序列帧就是一张张图片，快速连续播放就能成为动画，但是在H5里直接播放序列帧对网络性能不是很友好，有可能会造成卡顿或者丢帧，所以通常还会将其拼接成一张大图，即「精灵图」或者「雪碧图」(sprite image)。

拼精灵图可以用PS、Sketch等图像处理工具手工拼接，也可以找一些专门的工具制作。拼完之后，还需要根据动画的时长、帧率、尺寸等参数写相应的代码，比较常见的是写成CSS代码来使用。

当动画量很大，或者需要频繁修改的时候，这个流程就会比较繁琐，在这里和大家介绍一下我写的一个AE脚本，可以一键导出动画为CSS精灵图及代码，不需要先导出序列帧再拼接了。