AE动画导出json插件Bodymovin

Bodymovin插件是一款可以帮你把AE上做好的动画导出为json文件的插件，导出的json文件可以以Android/iOS原生动画的形式在移动设备上渲染播放。在制作动效时导出 json 文件直接给到开发，可以帮助提高实现动效效率，同时提高动效质量。

插件优点：

它可以支持 Android、iOS平台；

导出的文件体积小，方便开发使用；

实现效果佳，可以支持渐变等效果。

使用注意：

在使用前期，这种方法是否适合你现在所做的动效，lottie 是针对矢量动画开发的，不太适合图片过多的情况，图片过多会增加文件负荷，所以最好是将图片转化为路径动画。

在 AE 里导入到 Lottie 的图层不能识别矢量渐变。

不能支持外置插件的效果，比如粒子、光效等。

需要与前端开发沟通，他们是否愿意使用。

导出给开发的文件中需要有完整视频参考，开发可以通过完整视频知道 loading 位置和效果，同时如果出现 json 导出错误的情况，开发可以查看，遇到不一样的地方可以询问设计师。

开发完成后需要走查，看是否与你预期一致。

安装方法：

下载ZXP installer：https://aescripts.com/learn/zxp-installer/

下载bodymovin：https://github.com/airbnb/lottie-web

下载之后，点开刚下载的 ZXP，点开顶部 file-open，打开 bodymovin插件。

当出现以下界面时代表已经安装成功。

意外情况：在用 ZXP 安装 bodymovin插件的时候出现以下提示。

原因是没有通过 Adobe Creative Cloud 下载 AE，需要重新通过 Adobe Creative Cloud 下载。

打开AE，After Effect CC – 首选项 – 常规，勾选允许脚本写入文件和访问网络。

打开窗口 – 扩展查看是否添加成功。

调出 Bodymovin 面板，选择需要导出的合成。

点击你要保存的 json文件地址，点击 Render。

点击 Brown 载入刚导出的 json文件，检查动效是否有误。

这时候就可以把 json 文件给到开发，如果 AE 合成中有图片，需要把图片放在文件夹内一起提供给开发，同时也会给到一个 gif文件，如果实现有不一样的地方，开发可以询问设计师。