来源:网络 作者:佚名
设计师主要是在 AE 里设计动画。AE 的强大无需赘言，位移、旋转、缩放、透明度动画可以说是非常基础的操作，完成不了的我们就用精灵图哈哈。那么问题来了，做好的动画怎么导出给研发？之前市面上还没有能直接干这事的工具。。。
不过现在有了：
BX-AE2CSS 是一个将 AE 动画导出为 图片 + CSS 动画代码 的工具，通过下面这个视频看看他是怎么工作的。
将AE动画导出为CSS代码
它可以读取 AE 里图层的位移、旋转、缩放、透明度动画信息，以及做好标记的图层导出为精灵图动画，最后生成一个 HTML 文件来预览。导出的产物只有图片和 CSS + HTML 代码，没有 JS，没有第三方库，够纯粹吧。这样在完美还原动画的同时可以无缝插入 H5 页面，之后如果有小的修改（替换图片等）也十分方便简单。
还记得我在文章开头说过，我们设计师团队也贡献了可能上万行代码！
这其实不是在炫耀，而是目前 BX-AE2CSS 的一个局限。由于时间和精力（其实是水平）有限，我只能做到逐帧导出动画数据，一个图层一帧就是一行，一秒一般是 30 帧，可以脑补一下几个页面下来的有多少行……这样虽然可以兼容表达式等复杂动画操作，但并不是一个「优雅」的解决方案。CSS 动画是可以指定关键帧之间的缓动插值函数的，如果能做好转换（ AE 里的插值曲线和 CSS 还是略有不同的），导出的代码也会更高效精简。这也是我之后的一个改进方向，希望能有所突破。
虽然这个工具现在还很初级（我把版本号先设为 0.1 了哈哈），导出的代码质量也不高，但它已经达到「可用」的级别——经过项目验证的哦。
我把它开源到 Github 上了，更详细的安装、使用教程欢迎访问项目主页，欢迎大家试用，顺便求 Star ！
Github地址：https://github.com/bigxixi/ae2css
原文地址：网易UEDC（公众号）
