本文针对设计师和技术同学,在动效落地时提供了一种更高效的思路
文/饼饼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
所以,这就会多占用设备的性能,所以我们尽可能的用矢量绘制的素材代替位图素材。
下面我以ADD团队内部产品的loading动画做演示,这个动画只用到了矢量图形我打了组,其实所有的素材都是形状层,如下图AE截图:
OK,动画制作完,就可以用Bodymovin导出啦~由于没有用外部素材,所以导出的只有json文件,再附上动效预览视频或者GIF,方便开发同学校验实现效果~
四、Bodymovin插件的安装与使用
准备工具:
3.ZXP Installer软件(安装Bodymovin时使用)
为了让大家能尽快使用,我已经将Bodymovin和ZXP Installer软件打包好了,在文末有获取方式~
安装方法:
1.装好AE(不细说了哈哈!)
2.安装ZXP Installer(双击安装即可,贼简单)
到这里就是安装成功了
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文件。
五、Lottie的局限性
1.不能存在相同命名的层
无论是素材还是我们自己创建的层,亦或者是打组时的命名,都要不一样,否则会出错。比如下面的车部分颜色丢失
3.Lottie/Bodymovin支持效果表
六、GIF的正确导出方式
我们再来回顾一下GIF的自身缺陷:
3.透明导出有白边
现在有很多直接从AE导出GIF的插件,但是我试了几个觉得插件不稳定,而且画质没有PS导出的高,所以我们这里只讲一种基本导出方法,接下来我们逐一解决:
1-缩小体积,节约性能
首先,影响GIF体积的3个因素:
尺寸+动画复杂度+动画时长
尺寸、动画时长越小,输出GIF的体积也就越小,这里不做过多说明了。我们就来说说动画复杂度。影响动画复杂度的因素主要是:颜色和运动方式
相同条件下,色彩越丰富,GIF体积越大
全彩色-大小4.2M
部分灰色-大小2.1M
所以,在做展示GIF时,我们不妨将重点内容突出,将不重要的部分置灰,可以适当减小体积
相同条件下,运动方式越复杂,GIF体积越大
直线运动方式-2.5秒-4M
曲线运动方式-2.5秒-6.2M
由此可见,如果不是必须,尽可能保持运动方式的简单,这样有助于减小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