炫酷神器,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
  1. 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

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


    4.png

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


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


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


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


    00.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 草坪和器械场上这么多人,我本来以为这个点很清净的。他们都那么无聊吗?不可能都和我一样有思想的。
    杨知行阅读 304评论 0 0
  • 随着《北京遇上西雅图不二情书2》的上映,房产中介吴秀波演的角色大牛(Daniel)的口号“买断美国”,高中生浩浩的...
    留学咖啡馆阅读 896评论 0 1
  • 男同志给我发了一个有用的链接。 为了报答他。 我给他发了一个我本月信用卡的账单。 :) 擦电脑。 擦坏了。 屏幕变...
    S猫阅读 769评论 8 2
  • 今天的晨读分享内容是《重要的事情说3点》这本书,主要是讲如何有效的表达和达成沟通目标。主要分享了三点,分别是让对方...
    事是拾阅读 392评论 3 7