前段时间，Airbnb出了个移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE（Adobe After Effects）可是视频后期特效和动画制作的行家，现在把安装和使用方法分享给大家。
下面就分步骤总结下Bodymovin的安装和使用
- 如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2017为例：
（AE CC2017 欢迎界面）
1.png
- AE安装完成后，安装Bodymovin插件。
2.1 到Bodymovin的GitHub首页（地址：[https://github.com/bodymovin/bodymovin](https://github.com/bodymovin/bodymovin)）克隆项目到本地，或者下载.zip包。
2.png
2.2 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，这个就是插件包了。
33.png
2.3 下载安装ZXP Installer（地址：[http://aescripts.com/learn/zxp-installer/]，打开软件，点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。
如果没有上面的图片，只是这个个空白的，也是可以的，有的电脑加载不出来，反正我的是，没有显示上面的图片也安装成功了，我也不懂具体原因。
66.png
-
打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。
4.png
4.点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。
5.png
-
我们在空的AE项目里，新建一个名为“视频”的合成，并制作一段简单的动画：
22.png
-
打开Bodymovin插件窗口，可以发现“视频”出现在了下面的列表中。选中“视频”，设置好json文件输出位置，点击“Render”。
11.png
-
Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：
00.png
大功告成了，导出来的文件可以交给程序员哥哥了，接下来的事情让他们自己去弄吧，我们美工能帮的就这些了。嘿嘿！
网友评论