如何用Bodymovin帮你无缝输出AE动画

 

如果摆弄界面整理规范是UI设计家常便饭的话,那么UI动效便是风味独特的餐后点心。 适当地在项目中引入动画,能缓解用户与机器交互的不安情绪,帮助用户对操作后的变化做良好的预判。

而作为动画输出的强有力的生产工具——AE,不论其界面的复杂程度,还是动画成品的细腻程度,都当仁不让地居于压倒性第一的位置。然而设计师在与开发对接的时候,往往要面对数量庞大动画参数标柱而无所适从,即便是偷懒导出序列帧,也往往会面临质量太大帧数太多而影响机器性能的风险,而且不论是哪种形式去实现,都无法敏捷地应对每一次的调整测试,维护效率极低。

那么就有没有一种工具能让程序开发敏捷高效低地对接设计师的动画需求吗,有,Bodymovin帮我们做到了。

一,Lottie + Bodymovin介绍

Bodymovin,是一款AE插件,帮助我们把动画输出成SVG/canvas/html+js,或者直接通过Lottie库生成安卓和iOS的原生代码。

对还不知道Lottie库是什么的小伙伴,看一下官方介绍:

Lottie is the native engine that Airbnb’s awesome team built. It uses Bodymovin as the animation exporter and is the ideal complement for getting animations to play natively everywhere.

它是一款由Airbnb团队开发出的,完美地依托Bodymovin作为动画输出、帮助我们在项目中更自然便捷呈现动画的原生引擎。

 

 

二,如何使用

 

安装插件有几种方法,比如直接到Adobe的插件中心下载插件(地址:https://creative.adobe.com/addons/products/12557,一般不是最新版),也可以到Bodymovin的GitHub首页下载最新版的插件并安装。我推荐第二种方法,这个方法步骤如下:

1.BodymovinGitHub首页(地址:https://github.com/bodymovin/bodymovin)克隆项目到本地,或者下载.zip包。

2.在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件,这个就是插件包了。

3. 下载安装ZXP Installer(地址:http://aescripts.com/learn/zxp-installer/)解压zxp插件包。不过我通常通过修改后缀名为”zip”,”rar”的形式暴力解压。

 

 

4.将解压后的文件夹整个丢进Adobe的CEP文件夹里。WINDOWS和MAC的路径分别是:

WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or
C:<username>\AppData\Roaming\Adobe\CEP\extensions

MAC:
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin


5.
打开com.adobe.CSXS.6.plist文件(路径:Macintosh HD/资源库//Preferences/com.adobe.CSXS.4.plist,添加一个String(Type为String,Value为1)。亲测跳过这一步也可以正常使用。

6.在AE中打开Bodymovin

7.按照下面操作将你用AE制作的动效导出.json文件(先选择你要导出的comp,然后选择目标文件夹,最后点击Render)(点击设置按钮可以根据需求勾选其他),点击player输出bodymovin.js文件。

 

 

三,小试牛刀

打开前面GitHub站下载的demo,了解一下json的引入规则,我们就可以做个动画玩转起来。

https://shengjun89.github.io/wd-animation/

这是我用来测试Bodymovin效果,设计的一个logo走线动画,跑起代码可以看到WED端已经比较高地还原出了AE动画的缓动和弹性效果。另外每个动画个体都配有以下几个参数。

  • animationData: an Object with the exported animation data.
  • path: the relative path to the animation object. (animationData and path are mutually exclusive)       //动画相对路径,参数是json的文件路径
  • loop: true / false / number   //控制是否循环以及循环的次数
  • autoplay: true / false it will start playing as soon as it is ready  //控制自动播放
  • name: animation name for future reference  //名称方便后面引入关联
  • renderer: ‘svg’ / ‘canvas’ / ‘html’ to set the renderer  //渲染格式
  • container: the dom element on which to render the animation //容器,制定某个具体dom元素用来承载渲染动画

了解Bodymovin运作原理后,我又结合我们麦子借款项目制作一个可交互的原型demo。毕竟自顾自地播放跟输出gif图没有差异。

https://shengjun89.github.io/audit-animation/

原理很简单,点击审核成功清空循环动画的内容,播放审核成功的动画。点击刷新则反过来。目的是去模拟借款额度评估中和和评估结束的效果。

四,学习总结

缺点:

1,Bodymovin渲染的动画,如果是在AE里面创建的矢量元素,则直接生产json代码。如果动画里有导入位图,则会导出编号后的图片文件到image文件夹里。

2,AE里里制作动画注意不要有太多的合成嵌套,原生环境下有些会出现渲染不出的情况。

3,用AE的朋友可能留意到上面的WD动画使用了修剪路径的效果,这里要提醒使用该效果时,不宜同时修改start和End等多个参数,渲染出来的效果会有些许偏差。然后路径动画的stroke值越大,误差可能会越大,需要人为调整。

4,原生环境下运行json动画时,出现了起步延迟的状况。所以也不太适合对动画时间有精密要求的项目里使用。

5,安卓Android 5.0以下的机型会不支持SVG动画,所以对接安卓的时候需要做好两手准备。

优点:

所谓凯撒的还给凯撒,上帝的还给上帝。Bodymovin让设计开发各自专注在自己的领域而不用去在意动画实现过程中的一些繁缛细节。而且只要保存好AE源文件我们可以随时导出替换json文件,方便动画调试。懂一些基础前端代码的小伙伴们,甚至可以自己发挥脑洞,自己调试出一些有趣的原型动画出来。一套json文件,就能同时满足web 原生 reactNative不同环境的动画制作需求。

相信Bodymoivn还会不断的迭代升级,开放更多的定制化参数。有兴趣下载试玩起来。

PS:  文章里出现的demo,大家可以去我的github主页下载https://github.com/shengjun89,如有问题欢迎留言指正。

刷牙君

View posts by 刷牙君
处女座设计师一枚,涉及的专业领域视觉,交互,前端。

Leave a Reply

Your email address will not be published. Required fields are marked *