AE动画导出json插件Bodymovin

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

插件优点：

它可以支持Android、iOS平台；

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

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

使用注意：

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

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

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

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

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

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

安装方法：

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

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

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

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

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

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

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

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

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

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

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

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

Tags:Bodymovin,AE.