炫酷神器,AE插件Bodymovin.zxp的安装与使用

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


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


1.   如果电脑上没有AE的话,需要安装AE CC2014或更高版本。以AE CC2017为例:
    (AE CC2017 欢迎界面)


![1.png](http://upload-images.jianshu.io/upload_images/4927175-d42cfd3614d9d5b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


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


    2.1 到Bodymovin的GitHub首页(地址:[https://github.com/bodymovin/bodymovin](https://github.com/bodymovin/bodymovin))克隆项目到本地,或者下载.zip包。
![2.png](http://upload-images.jianshu.io/upload_images/4927175-80670c109471f4ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


    2.2 在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,这个就是插件包了。
![33.png](http://upload-images.jianshu.io/upload_images/4927175-b443ca02fe4517d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


    2.3 下载安装ZXP Installer(地址:[http://aescripts.com/learn/zxp-installer/],打开软件,点击“File”>“Open”菜单项载入上述bodymovin.zxp插件包,ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示,表示插件已成功安装。![3.png](http://upload-images.jianshu.io/upload_images/4927175-cece69da0fd5f585.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果没有上面的图片,只是这个个空白的,也是可以的,有的电脑加载不出来,反正我的是,没有显示上面的图片也安装成功了,我也不懂具体原因。
![66.png](http://upload-images.jianshu.io/upload_images/4927175-2b6bf7950eb18d2a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


3. 打开AE,点击“编辑”>“首选项”>“常规”菜单项,选中“允许脚本写入文件和访问网络”,点击确定。
![4.png](http://upload-images.jianshu.io/upload_images/4927175-51dbfc7e96e07a4b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


4.点击“窗口”>“扩展”>“Bodymovin”菜单项,就可以打开Bodymovin的界面使用插件了。
![5.png](http://upload-images.jianshu.io/upload_images/4927175-9a47e39bea72e336.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


5.  我们在空的AE项目里,新建一个名为“视频”的合成,并制作一段简单的动画:
![22.png](http://upload-images.jianshu.io/upload_images/4927175-92c4266550c5d0de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


6.  打开Bodymovin插件窗口,可以发现“视频”出现在了下面的列表中。选中“视频”,设置好json文件输出位置,点击“Render”。
![11.png](http://upload-images.jianshu.io/upload_images/4927175-79cb78dde087709e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


7. Bodymovin还为生成出的json文件提供了预览功能,点击插件界面上的“Preview”按钮,点击“Browse”载入刚刚生成的json文件,就会看到,动画被原汁原味地导出了:
![00.png](http://upload-images.jianshu.io/upload_images/4927175-599590ea9ec6bbe0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
大功告成了,导出来的文件可以交给程序员哥哥了,接下来的事情让他们自己去弄吧,我们美工能帮的就这些了。嘿嘿!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值