SVGA动效落地的使用与避坑

来源:网络   作者:热心网友   发布时间:2020-11-05    浏览次数:104
设计先锋小编今天来分享SVGA动效落地的使用,都是在平时项目中总结出来的一些经验,希望能够帮助到你。

一、案例背景:为什么弃Lottie投SVGA


耍家任职于一家电商产品公司。双十一大促近在眼前,我们想通过大量的动效来营造平台的活动氛围。

因为近些年Lottie的风行,前端动效落地的成本比以前低了许多,不论是 动画视觉效果、前端事件绑定、动效文件大小控制等等方面,Lottie让UI设计师在动效上的发挥空间得到了进一步的扩展。我们团队之前实施动效落地,也是一直采用的Lottie方案。

但这次想达到的动效效果和之前的不太相同。这一次因为关系到双十一大促活动,我们想让动效风格更加夸张、惊喜。导致我们在运用Lottie的过程中,遇到了诸多问题。

后来经过各方面的请教与调研,这次我们准备转战 SVGA方案。

网络上关于SVGA的资料不少,但大多数不涉及到真实项目场景的细节还原。所以我准备分享实例,好好讲一讲我为什么最终选择SVGA,以及如何执行、如何解决在这个过程中遇到的问题的。


二、辛路历程

这次我们在Lottie上遭遇碰壁,原因是因为Lottie矢量动画不支持部分AE直出的样式效果,导致我们必须考虑以序列帧的方式去实现动画。

我们在AE中制作好的成果,导出json后在本地解析预览,效果不尽人意。到各端真机上演示还会再损失掉更多的样式效果。(原因是因为 Lottie在不同环境中所支持的AE参数有所差异)
以津贴红包动效为例。为了给用户带来红包的惊喜、喜庆氛围,前期我构思的动效是希望尽量带有冲击感。拟3D的效果可以让红包的出现看上去更加真实,并且在红包飞出过程中使用了发光效果。




前期我们为了避免走进「序列帧动画」的胡同,基于我们团队在Lottie方面所具备的经验,我们希望尽量通过Lottie所支持的AE属性来实现矢量动画,这样在文件大小、性能上都能够得到把控。


例如,我们知道 Lottie是不支持AE效果器所直接填加的效果的。于是对于发光效果,我们并没有直接采用「效果-发光」去实现,而是通过「高斯模糊+内发光+投影」的方式,从视觉上去模拟发光。也期许这样简单的图层样式,能够被Lottie解析。


但通过Bodymovin导出json后进行本地预览,出现了这样的状况:内发光、投影效果和高斯模糊都丢失了。效果非常生硬


甚至到了 真机演示上,3D效果竟然也丢失了。完全没法投入落地使用。



为了兼容所有的样式效果,我们最终只好将动效输出为序列帧,通过Lottie去一帧一帧播放(还是踏上了这条路...)。最终这样的方式导致Lottie输出后,包内所包含的img位图文件总量达到了数兆之多...

为了找到一个不管从 视觉效果还是 文件大小上都能主动把控的技术方案。 于是我盯上了SVGA。


三、SVGA初体验

在此我就不再做过多的SVGA背景说明了,网上一查一大堆。我盯上SVGA的原因是因为,许多直播礼物的浮夸动效都是用序列帧+svga方案落地的,应该符合我们这次的项目要求。


通过最初的探索发现,SVGA和Lottie其实很类似。你可以直接制作矢量动画输出svga文件,当然, SVGA也有它所不支持的AE属性。你也可以通过序列帧去输出svga文件,这一点和Lottie就有所差异了。

熟悉Lottie的朋友应该知道,当动效中包含位图元素时, Lottie会生成两个文件:一个json代码文件+一个img文件夹,这也是为什么我之前用Lottie去做序列帧时,整个文件包的大小达到了几兆之多的原因,大部分都是因为一张一张的图片堆积起来的。

而通过 SVGA,只会生成一个svga后缀文件,代码和位图元素都被集成在了一起。



第一次接触SVGA的我,掉进了惯性思维的陷阱。无脑地以为SVGA就是专门为做序列帧动画而诞生的。所以直接上手把整个动画合成都导出成了序列帧动画。最后输出的文件依然超超超级大...
一定是我哪里出了什么问题...于是我开始了漫漫探索优化的道路。


四、走起来了!走起来了!

虽然无可避免地走上了「序列帧动画」这条路,但为了优化动画文件大小,我们开始思考,如何尽可能地减少序列帧的帧数。让序列帧动画尽量少,让矢量动画尽量多。


最终我们决定将红包动画拆分为两个部分:「红包飞出部分」+「等待开启部分」。


因为「等待开启部分」所涉及到的动效参数,都比较基础,缩放、旋转、透明度这类基础属性,是SVGA矢量动画肯定能够解析的。所以对于这一部分我们把元素全部进行了拆解,最后输出的矢量动画文件,只有几十k。


而「红包飞出部分」,我将作为本次讲解的案例,分享给大家。讲一讲我的操作与实现过程需要注意的事项。

 步骤一:制作动效并导出序列帧  

制作动效的部分,是属于AE使用范畴的内容了,我在此不做过多赘述。做好动效后,把合成添加至渲染序列,然后选择导出为序列帧。


 步骤二:压缩序列帧文件并导入  

从这一步开始,你就要做好思考如何优化svga文件大小的准备了。 导入序列帧之前,务必先对所有的序列帧文件进行压 缩(或者你的动效文件中有位图元素,也务必先对位图进行压缩)。元素文件大小将关乎你最终svga文件的大小。


SVGA和Lottie不一样的地方就在于,SVGA是将位图集成在svga文件当中的,而Lottie则是把json和位图分离开。Lottie可以在导出后,再对位图进行文件大小优化;而 SVGA 最好是在事先就对位图进行大小优化。我一般使用tinypng来压缩位图。


在项目面板中「右键-导入-文件」,选择序列帧文件夹。

步骤三:制作序列帧动画并导出  

五、该如何优化svga大小

我几乎把网上流传的各种优化svga文件大小的方式都试了个遍。


最终我发现, 对SVGA序列帧帧动画大小影响最关键要素始终都是位图文件的大小。任何方式的最终落脚点,都是在直接或间接地优化位图文件。


方法一:控制文件尺寸 

尺寸越大文件越大, 即使是alpha通道中的透明像素,也会影响位图文件的最终大小。所以控制动画素材文件的尺寸,是优化svga文件大小的方式之一。


如果动画的展示不需要全屏,尽量缩小动画区域。如果动画展示是全屏, 建议尺寸可设置为680*1209,基本可以满足所有分辨率的移动设备。

这里提出一个 避坑点:「控制尺寸」是指在制作动画时,就需要对画板尺寸进行控制。而不是二次导入序列帧后,再去改变合成的尺寸。在这个时候改变合成尺寸,约等于只是在改变动画的可视区域,对最后导出的svga文件并没有影响。

举个例子:序列帧的原尺寸为400px*400px,原本输出的svga动画大小为90k。在保持序列帧尺寸不变的情况下,经过我的实验,就算我在二次序列帧合成中改变合成的尺寸为1px*1px,输出的svga动画大小依旧会是90k!只是动画的可视区域变成了1px*1px。原因是因为,实际上svga文件中包含的源位图文件是一样的。只有在制作动画时,导出300px*300px的序列帧,才能够真正优化到svga文件哦!


 方法二:降低帧率 

相信大多数人喜欢用24fps或30fps制作动画,也就是每1秒钟的动画,将会产生24张或30张序列帧文件。


经过其他同行的验证,说14fps其实也基本可以满足动画的视觉要求。也就是说,同样为1秒的动画,只会产生14张序列帧文件。 从源头上减少位图文件数量。

但我自己有做尝试,14fps对于我们项目所需要的动画来说会稍显卡顿,所以最终选择了放弃。

具体的动画要具体分析,其实也不妨可以 尝试15-20fps之间的帧率,来寻找动画效果与文件大小的平衡。


 方法三:手动抽帧  

和降低帧率的原理一样,「手动抽帧」也是从源头上减少位图数量。


我查资料的时候发现有同行使用过「每隔一帧抽一帧」、「每隔两帧抽一帧」、「每隔三帧抽两帧」的方式,我为了保证动画的连贯性,最终还是选用的「每隔一帧抽一帧」的方式。

这里有一个 躲坑点:因为一般我们做一个动画,时长是提前明确的, 抽帧之后会导致动画时长缩短(例如「每隔一帧抽一帧」会导致动画时长缩为之前的1/2)。所以为了保证动画时长不变,我们抽帧之后要手动 降低帧率。

举个例子:因为「 总帧数=帧率*时长」,在一个帧率为24fps的合成中,1s的动画,就会有24张序列帧文件。我们选择「每隔一帧抽一帧」的方式,保留了12张序列帧文件。在时长1s不变的前提下,我们需要用12fps帧率来重新新建一个合成导出svga文件。


 方法四:降低分辨率  

其实说到这里,大家也该悟到了, 想控制svga的大小,其实就是在想方设法控制位图文件的总大小。

通常我做动画,都是在@2x下制作位图元素。但如果前面的方式都尝试了之后,发现你的svga文件还是过大,你还可以选择在@1x下制作素材。缺点是在高分辨率设备上的画质会有所降低。

以上所有方法都要视具体动画,具体分析,筛选最为合理的优化方式。当然你还可以探索其他各种方式来进行svga大小的优化,只要记住宗旨是:减小位图文件总大小,一定还有其他更多的方式。也欢迎交流!
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:产品交互

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/8621.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通