ae导出json_设计师轻松实现动效转lottie神器AE插件Bodymovin

使用原生代码在各平台实现复杂的动效是一件性价比较低的事，还要考虑到适配不同屏幕尺寸。无论对设计师还是开发人员都是比较繁琐的。

而使用了lottie之后，可以做到同一个文件能应用到不同的平台，还能极大地减少开发成本。

一：什么是lottie

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画。

不仅使用简单，还能很好地实现动效设计师设计的动画效果。

而怎样才能将设计师在AE里制作好的较为复杂的动画转换成lottie？

这时候今天的主角Bodymovin就要出场啦~~

就是这个叫Bodymovin的AE插件，是一个可以把动效设计师在AE里做好的动画导出为json格式，然后以Android/iOS原生动画的形式在移动设备上渲染播放。

能帮助设计同学很容易的将AE动画导出成代码文件提供给开发同学使用。

现在我用工作中使用到的案例给大家分享Bodymovin这个插件具体的应用。

二：Bodymovin导出案例

针对设计师在AE里做动画会遇到用到外部图片素材和完全只使用图形层制作动画的两种情况，分别分享这两种情况的区别。

设计师在制作动画的过程中有时候不可避免会遇到用到图片素材的情况(个人建议尽可能少的去使用图片素材，后面会讲到具体原因)

我用腾讯动漫APP里的下拉刷新动效为例：

动画预览：

制作这个动画的时候，动画里只有黑子眼睛和飞碟下面的线条做了细节动画，所以其余不用做细节动画的部分我用到了其他设计师提供的素材图去制作。

AE里的截图如下：

检查好动画无误后即可使用Bodymovin插件进行导出。

(导出方法后面会有具体阐述~)

这时候需要注意，由于用到了图片素材，导出来的结果除了json文件还会多一个名字为“images” 的文件夹。如下图所示：