【博文精选】使用After Effects输出代码原生动画

由于技术限制,大多动效设计师都不具备使用代码的能力,输出的动效demo对于前端开发同学来说,只能作为参考,且部分效果也不具备代码实现性。对于UI开发等前端设计与开发的同事来说,gif动画文档数据量大,容易导致加载问题,使用代码制作动画的难度高、工作量大,且动画的设计还原度多少会有偏差,工作过程中需要多次沟通与返工,也是不胜其烦。本文将介绍一种使用AE插件bodymovin输出HTML5/Android/iOS原生动画的方法。


众所周知,AE(Adobe After Effects)是一款功能十分强大的动画及特效软件,也是众多动效设计师的必备工具。如果能将AE制作的动画能够直接输出为代码,将可以最大程度的还原动效设计的效果,并大大减轻前端设计师的工作量。

bodymovin的出现,可以将AE中制作的动画信息导出json文件,从而实现了动画的代码化。


什么是bodymovin?


bodymovin是一个基于AE使用的一个开源的第三方扩展插件,这个AE插件可以把AE上做好的合成(Composition)导出成带有矢量动画信息的json文件,并可以在以下平台播放:

  • Web页面,以svg/canvas/html+js的形式。Bodymovin自己提供了作为Player的js库——bodymovin.js;

  • Android原生,通过Airbnb的开源项目“lottie-android”实现;

  • iOS原生,通过Airbnb的开源项目“lottie-ios”实现;

  • React Native,通过Airbnb的开源项目“lottie-react-native”实现。


bodymovin的下载与安装

首先,确保你的电脑上已经安装AE CC2014或更高版本。

关于bodymovin插件的下载与安装,网络中已经有很多相关介绍了,此处直接贴出下载地址与安装方法说明,有需要的同学可点击下方链接进一步了解,此文就不再着重介绍了。

下载与安装方法介绍:

https://github.com/bigxixi/bodymovin


谁来使用bodymovin?


整个动效制作环节需要使用AE的 动效设计师 与相关 前端开发 共同完成。

动效设计师负责使用AE制作动画效果并输出json文件,前端开发同学负责将json文件加载到代码环境并进一步处理。


如何使用bodymovin制作原生代码动画?


1. 动效素材的准备


由于功能限制,该插件对AE中的滤镜特效及粒子系统尚不能支持。所以先对自己需要制作的动效进行合理的判断,将其中的矢量动画相关素材根据动效需要单独整理,优先处理为AI或eps文件,并合理命名。psd文件建议将其中的路径粘贴到AI文件中保存。

【博文精选】使用After Effects输出代码原生动画

为什么要保存AI或eps?

本人在实际使用中发现,AI和eps中的路径在AE中可转化为shape层的path,插件对此图层的支持效果更好。psd导入AE中,其矢量路径会以图层遮罩(mask)的形式存在,一方面mask制作动画存在很大的局限性,另一方面mask会导致json文件中出现多余的image,在ios或Android的环境中调用容易出现image报错。


2. 新建AE文件,导入动效制作所需素材


根据需要新建AE文件,并新建合成,设置帧速率与时长。

导入素材,并拖进合成中,右键将矢量素材层转为形状(shape)层。

【博文精选】使用After Effects输出代码原生动画


3. 制作动画


素材转化为shape层后,一般会保留原素材的基础属性。你可以根据自己的想法,对对图层中的元素进行属性的编辑与做关键帧动画。

【博文精选】使用After Effects输出代码原生动画

动画制作过程不多讲,对AE不熟悉的同学得先自学下AE了。

此处需要注意:该插件目前是有一定局限性的,只能导出AE中带有矢量信息的动画,对AE中滤镜特效及粒子系统尚不能支持。另外在使用3D层、摄像机、图层混合模式、表达式时,注意先进行测试,插件的输出文件一般对html支持比较好,但在其他代码环境下会出现报错或没有动画的情况。


4. 渲染json文件


动画制作完成后,记得在时间线上选定需要输出的时间区间,然后点击“窗口”>“扩展”>“Bodymovin”菜单项,就可以打开Bodymovin的界面使用插件了。

【博文精选】使用After Effects输出代码原生动画

然后选中需要渲染的合成层,并点击右侧的“…”选择渲染的保存地址。设置完成后,点击“render”。

【博文精选】使用After Effects输出代码原生动画

渲染完成后,我们可以在插件中点击Preview—Current Renders中,选择刚才输出的文件名进行效果预览,可以看到,动画已经被原汁原味的导出了。

【博文精选】使用After Effects输出代码原生动画


5. 将json文件交给开发同学,在代码环境下进行测试


制作完json文件并不是结束,而是另一个开始。开发同学还需要将json文件放入代码环境中,并检查动画是否能够正确的播放。如有报错,需要与开发同学一起排查问题原因。

用于HTML

查看demo,有不同的动画加载方式:

  • 从build/player/获取最新 bodymovin.js 文件

  • 在你的html文件中包含 bodymovin.js (发布时可以gzip压缩一下减少体积)

<script src="js/bodymovin.js" type="text/javascript"></script>

用于Android/iOS设备

在GitHub上搜索“lottie”,然后选择合适的平台。

详细方法参考页面底部的说明:

https://github.com/airbnb/lottie-web



插件使用的一些注意事项:


1. 事先沟通很重要!

制作动效前,一定要与相关的开发同学充分沟通,对齐动效的实现方法与了解动效实现的局限性,来决定动效分工与实现的形式。

2. 考虑动效应用的场景

并不是插件实现的动画一定文件量就一定小!由于json文件的使用需要预先加载一个大约30kb的js库,例如在制作比较简短的loading时,其实gif文件量会更小。

3. 制作过程中,使用到一些AE中高级技巧时,要记得先测试

之前有提到,插件并不能支持AE的全部功能,一些滤镜效果、表达式等并不能完全支持,需要先制作一个简单的demo交给开发进行测试,没有问题再大规模使用。


插件在AE中应用的支持与限制:

插件支持预合成、形状图层、固态层、图片、空对象以及文字图层。
支持遮罩(masks)和反向遮罩(inverted masks)。但是会对性能造成巨大影响。
支持时间重映射(time remapping)。
支持形状图层的形状、矩形、椭圆和星形。
支持部分表达式。
不支持: 图像序列、视频和音频 (也许未来会支持)。
不要伸缩图层!不知为何,伸缩图层会破坏导出的数据,所以不要做这个操作。


更多关于AE效果的支持信息:

https://github.com/airbnb/lottie-web/wiki


写在最后

bodymovin插件的出现,确实为使用AE的动效设计开辟了一种直接代码化的方式,切实能解决一些动效设计师与前端设计开发的工作难点。虽然目前插件的发展还比较初级,未来随着插件的不断迭代,可能会支持更多的AE效果,也可以使动画呈现的方式更加丰富。在此,也希望大家在实际应用的过程中,多交流相关经验,文中内容如有纰漏不妥之处还望指出。谢谢!


———————————————


如果您觉得内容不错


请点击屏幕右上角按钮【分享到朋友圈】分享内容


更多精彩内容请关注公众号:tx_cdc


【博文精选】使用After Effects输出代码原生动画



本篇文章来源于微信公众号: 腾讯CDC体验设计

UI/UX

视觉工作流优化 (上)——起点读书改版实战

2018-1-17 17:36:00

UI/UX

设计师如何通过作品集让能力值呈现PLUS?

2018-1-18 8:41:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索