如何将AE动画转为json文件？

一年前在知乎写过一篇关于制作 lottie 动画的回答，

最近仍然有小伙伴私信我一些问题，所以今天写一篇文章，把关于制作Lottie动画的过程和一些技巧做一个总结，分享给大家。

Lottie 动画是什么，简单地说，就是airbnb提供一种方法，让设计师将AE制作的动画通过一个插件生成一个json文件，开发同学可以直接在软件中解析json文件来实现动画。不需要设计师再导出GIF或者序列帧。

接下来就以一个小动画作为案例，完整的展示一下从绘制动画到实现动画再到最后导出json文件的过程。

所需软件和插件：

After Effects 、 Bodymovin（AE插件）、 Sketch、 AEUX（sketch&AE插件）

制作步骤：

01 在sketch中绘制出矢量图形

02 用AEUX插件将矢量图形导入到AE中

03 在AE中制作动画

04 打开bodymovin插件，生成json文件

05 在Lottie 官网预览一下，

确认没有问题可以交付给开发。

其实整个过程还是比较简单的，AE和sketch插件的安装方法都比较简单，我在文章中就不做赘述了。

如果需要查看插件安装方法的话，可以看我之前的这篇回答——如何看待 Airbnb 新发布的 Lottie？

两个个需要注意得到点：

01 如果动画中含有渐变颜色，bodymovin导出json时会动画的颜色会变成黑白。

解决这个问题的办法是：把AE切换成英文版，亲测可用！

02 AEUX插件目前不支持最新版本的sketch，最好使用53.1以下的sketch版本。

补充更新（20190623）：

目前最新版的bodymovin（5.5.5版本）插件支持将图片内置到json文件中，所以即使在Ai中绘制好插画，再到AE中制作动画并导出，也可以生成一个单独的json文件，而不是像老版本需要生成json文件+链接图片文件。

补充更新（20210519）：

三年过去了，用动画json的小伙伴越来越多了，回答一个大家遇见较多的问题。

问：为什么，我的新版本插件，导出还是有图片，没有直接生成一个单独的json或者为什么

我导出之后预览是空白的？

答：因为插件中有一项设置需要勾选——

Settings — Assets — Include in json

另外还有很多小伙伴问视频可不可以直接导出json?

答：既然图片都可以 include in json了，你把视频导出成序列帧，然后以图片形式重新导入，AE排序一下，不就可以导出json了嘛！

(关于排序这里再告诉大家一个小技巧，先把所有图片长度裁剪成一帧，然后选中所有帧，

右键 — Keyframe Assistant — Sequence Layers,这样所有图片就会按照顺序首尾相接排序啦，效果如下图）

走到这一步，基本上就可以实现万物可 json 了！