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