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

从动效设计到代码|网易云音乐2018年度听歌报告的背后

还记得我在文章开头说过,我们设计师团队也贡献了可能上万行代码!

这其实不是在炫耀,而是目前 BX-AE2CSS 的一个局限。由于时间和精力(其实是水平)有限,我只能做到逐帧导出动画数据,一个图层一帧就是一行,一秒一般是 30 帧,可以脑补一下几个页面下来的有多少行……这样虽然可以兼容表达式等复杂动画操作,但并不是一个「优雅」的解决方案。

CSS 动画是可以指定关键帧之间的缓动插值函数的,如果能做好转换( AE 里的插值曲线和 CSS 还是略有不同的),导出的代码也会更高效精简。这也是我之后的一个改进方向,希望能有所突破。

虽然这个工具现在还很初级(我把版本号先设为 0.1 了哈哈),导出的代码质量也不高,但它已经达到「可用」的级别——经过项目验证的哦。

我把它开源到 Github 上了,更详细的安装、使用教程欢迎访问项目主页,欢迎大家试用,顺便求 Star !

推荐阅读