本文针对设计师和技术同学,在动效落地时提供了一种更高效的思路

文/饼饼ZWIN

“为什么动画外面会有一圈白边?”

“嗯…这个还原的和设计稿不一样啊?”

“不太好写,还要适配,再设计个简单点的吧”

在动效还原的过程中,设计师和技术同学发出了以上感叹。是的,很多设计师辛苦制作的动效,会在落地时遇到各种各样的问题。有时设计师不得不修改设计方案,亦或是开发同学在还原过程中费时费力,造成了很多不必要的劳动损失。那么在动效导出时有没有较好的方法呢?接下来我们就来聊一聊。

一、为什么不用GIF

GIF格式拥有非常强的兼容性,可以在大部分智能设备上直接预览,在各个平台上的兼容性也都很强。所以GIF成为设计师做概念展示时最受欢迎的格式。

但GIF的缺点也是显而易见的,首先GIF对设备的性能占用很大,有时候满屏的GIF就会让页面卡顿;其次GIF作为一种有损格式,多少会对画面的色彩、质感有些影响;第三,GIF对于透明通道的支持有限,导出会出现白边。 

所以我们说,GIF很好,但它更强调展示,对于产品中体现交互、体验等方面的动效,还有更好的选择。在文末,针对GIF做展示动画方面,我会分享一些减小它自身缺陷的方法。现在,我们先来说说今天的主角:Lottie

二、什么是Lottie

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画。

使用简单,还能实现很多设计师设计的动画效果。目前已经成为普遍常用的方法。他在 AE 中的插件叫 Bodymovin,可以把动效设计师在AE里做好的动画导出为json格式,然后以Android/iOS原生动画的形式在移动设备上渲染播放。

接下来,我们用实例说明一下Bodymovin插件的使用。

三、Bodymovin导出json


设计师在用AE做动效时,有时会用到位图素材,这是无法避免的,不过我的建议是尽可能用矢量绘制的图形,可以用sketch或者AI画好素材后导入AE。下面是我用位图素材做的小动画案例: 

1.使用到位图素材的情况这里的盾牌和小金币都是位图素材,下面是AE截图:

检查无误后使用Bodymovin导出(后面会详细介绍方法),完成导出后,除了json文件外,还导出了一个包含素材的文件夹image

所以,这就会多占用设备的性能,所以我们尽可能的用矢量绘制的素材代替位图素材。

2.完全使用矢量图形的动画

下面我以ADD团队内部产品的loading动画做演示,这个动画只用到了矢量图形我打了组,其实所有的素材都是形状层,如下图AE截图:

OK,动画制作完,就可以用Bodymovin导出啦~由于没有用外部素材,所以导出的只有json文件,再附上动效预览视频或者GIF,方便开发同学校验实现效果~

四、Bodymovin插件的安装与使用

准备工具:

1.Adobe After Effect CC 2017以上
2.Bodymovin插件

3.ZXP Installer软件(安装Bodymovin时使用)

为了让大家能尽快使用,我已经将Bodymovin和ZXP Installer软件打包好了,在文末有获取方式~ 

安装方法:

1.装好AE(不细说了哈哈!)

2.安装ZXP Installer(双击安装即可,贼简单)

3.打开ZXP Installer,点击“File”-“Open”菜单载入文件。快捷键 win:Ctrl+O;Mac:cmd+O。选择Bodymovin文件后自动安装

到这里就是安装成功了

4.打开AE,设置AE允许使用脚本:

Win:Edit(编辑)——preferences(首选项)——general(常规),勾选“Allow Scripts to Write Files and Access Network(允许脚本写入文件和访问网络)

Mac:After Effect——preferences(首选项)——general(常规),勾选“Allow Scripts to Write Files and Access Network(允许脚本写入文件和访问网络) 

5.点击window(窗口)– extensions(扩展)– Bodymovin,就可以使用了

先找到你要导出的合成,接着选择导出路径,最后点击渲染。即可得到json文件。

导出的json还可以在Bodymovin中预览,方法是点击渲染按钮右边的Preview(预览),接着点击browse,选择刚刚导出的json文件,拖动下方滑块预览动画。 

接下来如上一章节说的,检查无误后把json文件和动画预览视频或GIF一起发给开发同学~

五、Lottie的局限性

这么好用的动效转Lottie,却也不是万能的。这里我总结了在工作中遇到的和网友总结的一些Bodymovin不支持的问题:

1.不能存在相同命名的层

无论是素材还是我们自己创建的层,亦或者是打组时的命名,都要不一样,否则会出错。比如下面的车部分颜色丢失

2.大部分酷炫特效,比如我们熟知的粒子、saber等

3.Lottie/Bodymovin支持效果表

如果遇到常见但是Bodymovin不支持的情况,可以和开发同学沟通,是否可以使用序列帧

聊完了Lottie,我们再来说说GIF,前文我们提到GIF很适合做展示动画,但由于其本身的缺陷,仍然让很多同学又爱又恨。接下来,我们来聊聊如何导出更好的GIF。

六、GIF的正确导出方式

我们再来回顾一下GIF的自身缺陷:

1.体积大,占用性能
2.有损格式,画质丢失

3.透明导出有白边


现在有很多直接从AE导出GIF的插件,但是我试了几个觉得插件不稳定,而且画质没有PS导出的高,所以我们这里只讲一种基本导出方法,接下来我们逐一解决:


1-缩小体积,节约性能


首先,影响GIF体积的3个因素:

尺寸+动画复杂度+动画时长

尺寸、动画时长越小,输出GIF的体积也就越小,这里不做过多说明了。我们就来说说动画复杂度。影响动画复杂度的因素主要是:颜色和运动方式

相同条件下,色彩越丰富,GIF体积越大

全彩色-大小4.2M

部分灰色-大小2.1M


所以,在做展示GIF时,我们不妨将重点内容突出,将不重要的部分置灰,可以适当减小体积


相同条件下,运动方式越复杂,GIF体积越大


直线运动方式-2.5秒-4M

曲线运动方式-2.5秒-6.2M

由此可见,如果不是必须,尽可能保持运动方式的简单,这样有助于减小GIF体积

2-PNG序列转GIF提高品质

很多设计师在AE转GIF时会先输出MOV的视频,再利用PS–文件–导入–视频帧到图层–导出为web格式–GIF,但MOV经过2次转换,画质丢失比较严重。

这里我们要在AE导出时选择“PNG序列”,再利用PS将序列帧导出为GIF,这样画质可以提高。具体方法如下:

AE渲染设置,选择Lossless(无损),在Format里选择png  sequence(png序列),点击完成,渲染即可。 

打开PS–文件–打开,选择刚刚导出的PNG序列的第一个文件,然后点击左下角的“选项”,勾选“图像序列”,点击“打开”。

在PS可以看到动画时间轴

什么都不需要做,直接点击“导出为web所用格式”,在GIF格式设置里把“扩散”改为“图案”(这个算法可以进一步提高画质),导出即可。

七、总结

本文我们了解了动效转Lottie思路和Bodymovin插件的用法,虽然很多特效和属性不支持,但总体来说已经为设计和开发同学提供了很多方便,毕竟在体验和交互的提升上也不需要特别复杂的动效,而且这些不足一定会随着版本的优化得到解决~

在GIF的导出和使用方面,我们了解到了如何导出更好的GIF,和如何为GIF瘦身~

在工作中积极沟通,不断发现和解决问题,相信我们都能超越昨天的自己!

 

【获取Bodymovin和ZXP Installer素材包】见下方网盘地址。提取码:st76

Powered by Froala Editor

声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)