ae导出json_Lottie-前端实现AE动效

阅读时间 10~15min
本文转载自：TAFE - 腾讯动漫前端开发团队，原文链接：人类身份验证 - SegmentFault

项目背景

项目中为了优化用户体验加入了几处微交互动画，过期的流程都是设计输出合成的雪碧图，前端通过序列帧实现动画效果，如下图动画效果：

序列帧：

动画效果：

序列帧：

帧动画的缺点和局限性比较明显，合成的雪碧图文件大，且在不同屏幕分辨率下可能会失真。经调研发现，Lottie是个简单、高效且性能高的动画方案。

Lottie是可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和web端渲染动画的json文件。换言之，设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。

Bodymovin插件的安装与使用

1. 关闭AE
2. 下载并安装ZXP installerhttps://aescripts.com/learn/zxp-installer/
3. 下载最新版bodymovin插件https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp
4. 把下载好的bodymovin.zxp拖到ZXP installer