作者：李威

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

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

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

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

先简单介绍一下什么是AE脚本。

AE是一款强大的动画制作软件，内置了丰富的功能，同时也提供了一定的外部扩展能力，可以让用户基于软件提供的接口自己做一些「扩展」。

目前来说AE的「扩展」分三种：

插件(plug in)、脚本(script)、扩展程序(extension)

其中「脚本」可以理解为用一些命令调用AE本身的功能来组合施展，提高效率，后缀名是.jsx或者.jsxbin。

如何安装：

下载 CSS-Sprite-Exporter.jsx 文件，在这里右键 - 链接另存为.

打开AE, 点击 文件->脚本->运行脚本文件... 然后选择刚才下载的 CSS-Sprite-Exporter.jsx。

或者可以复制 CSS-Sprite-Exporter.jsx 到AE的脚本文件夹:

Windows:C:\Program Files\Adobe\Adobe After Effects \Support Files\Script\

Mac:

/Applications/Adobe After Effects /Scripts/

这样你就可以从 文件->脚本 中直接选择CSS-Sprite-Exporter了

这也是很多脚本的通用安装/运行方法。

使用方法：

1. 在 AE 中制作需要导出的动画。

2. 运行 CSS-Sprite-Exporter.jsx ， 界面大概是这样：

3.设置好参数，点击「生成」导出，如果没有意外，就会帮你打开到该动画导出的文件夹。各参数的意义如下：

最大宽度：当图片第一行拼接后宽度达到这个值，就会折到下一行继续拼接，默认是5000像素。

web兼容性：为了兼容一些旧的浏览器，如果项目有这个需求可以勾选，具体需要研发同学评估，默认没有勾选

CSS样式设置中的「ID名」指定了在页面中这个元素的「ID」，需要遵循CSS的命名规范，可以先保留默认导出给研发后让研发统一指定。

「动画名」指定了该元素的对应关键在动画的命名，也需要遵循CSS的命名规范，可以先保留默认导出给研发后让研发统一指定。

跳帧：如果动画帧数太多可以尝试用这个参数减少帧数，即「跳过xx帧」的意思，默认是不跳帧。

导出的CSS代码示例：

#mySprite { /*导出时指定的「ID名」*/

background-image:url('images/boom.png');/*精灵图路径*/

width:500px;

height:500px;

/*导出时指定的「动画名」*/

animation:myAnimation 1.42s steps(1) infinite;

}

@keyframes myAnimation{

0% { background-position:0px 0px; }

2.94% { background-position:-500px 0px; }

5.88% { background-position:-1000px 0px; }

8.82% { background-position:-1500px 0px; }

……

/*此处省略，一直到100%*/

……

97.06% { background-position:-1500px -1500px; }

100.00% { background-position:-2000px -1500px; }

}

4.打开「预览_XXX.html」 文件(建议用 chrome 打开)，预览导出的动画。

预览页面左边为动画，点击它能预览精灵图，下方会显示尺寸参数，点击蒙层返回。

右边为预览控制和导出的代码，下方可以设置预览背景色。

5.如果没有问题便可以复制代码了。

可以一键复制到剪贴板，方便快捷(使用了 Clipboard.js. )

使用注意事项：

AE中合成的名字尽量用英文及数字，这样导出的精灵图也会是英文和数字，不容易出现图片路径乱码问题。

动画的尺寸、时长、帧率尽量控制小一些，否则导出的精灵图尺寸会很大，容易导致一些性能问题。

CSS动画代码中位移的单位是像素(px)，如果需要别的单位需要转换一下。

应用案例：网易云音乐2017年终盘点

这个H5案例主要是用CSS动画来实现的，其中有很多小人的动画，以及水波、沙漏等小元素是用精灵图实现

关于这个脚本大家有什么疑问或者建议都欢迎联系我

也欢迎到脚本的github项目地址帮我加个star，谢谢！

https://github.com/bigxixi/CSS-Sprite-Exporter

本文来自网易实践者社区，经作者李威授权发布。