前段时间，Airbnb出了个移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE（Adobe After Effects）可是视频后期特效和动画制作的行家，现在把安装和使用方法分享给大家。

下面就分步骤总结下Bodymovin的安装和使用

1. 如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2017为例：
   （AE CC2017 欢迎界面）

1.png

2. AE安装完成后，安装Bodymovin插件。

2.1到GitHub的首页下载Bodymovin插件包（地址：https://github.com/bodymovin/bodymovin），下载或者克隆插件包到本地。

2.png

2.2在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，然后双击安装此插件。（安装过程中关闭AE软件）如果没有如下图片，先不用管，先进行下一步2.3操作。

image.png

2.3下载ZXP Installer（地址：[http://aescripts.com/learn/zxp-installer/），然后双击打开软件，点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。

image.png

3. 打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。

   
   
   4.png

4.点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。

5.png

5. 我们在空的AE项目里，新建一个名为“视频”的合成，并制作一段简单的动画：

   
   
   22.png

6. 打开Bodymovin插件窗口，可以发现“视频”出现在了下面的列表中。选中“视频”，设置好json文件输出位置，点击“Render”。

   
   
   11.png

7. Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：

   
   
   00.png
   
   

   大功告成了，导出来的文件可以交给程序员哥哥了，接下来的事情让他们自己去弄吧，我们美工能帮的就这些了。嘿嘿！