从动效设计到代码｜网易云音乐2018年度听歌报告的背后( 九 )_从动效设计到代码

而对于之前提到过的头发、衣物飘动动画，CSS 有个取巧但可行的方案来呈现——精灵图动画（CSS Sprite Animation），我之前也制作过一个 AE 动画导出为 CSS 精灵图动画的工具，感兴趣可以看下：https://zhuanlan.zhihu.com/p/34731896

设计师主要是在 AE 里设计动画。AE 的强大无需赘言，位移、旋转、缩放、透明度动画可以说是非常基础的操作，完成不了的我们就用精灵图哈哈。

那么问题来了，做好的动画怎么导出给研发？之前市面上还没有能直接干这事的工具……

不过现在有了：

BX-AE2CSS 是一个将 AE 动画导出为图片 + CSS 动画代码的工具，通过下面这个视频看看他是怎么工作的。

将AE动画导出为CSS代码

它可以读取 AE 里图层的位移、旋转、缩放、透明度动画信息，以及做好标记的图层导出为精灵图动画，最后生成一个 HTML 文件来预览。导出的产物只有图片和 CSS + HTML 代码，没有 JS，没有第三方库，够纯粹吧。这样在完美还原动画的同时可以无缝插入 H5 页面，之后如果有小的修改（替换图片等）也十分方便简单。