工作案例分享:SVGA动效落地的使用与避坑

访客4年前黑客工具489

编辑导读: *** 上关于SVGA的接头大大都都只是在软件上的问题,详细实践案例很少。本文作者依据事情中项目实践的所思所想,团结案例平分享了SVGA动效落地利用进程中很是有代价的设计常识,并对进程存在的问题举办了盘货,供各人一同参考和进修。

事情案例分享:SVGA动效落地的利用与避坑

靠连年底,事情繁多,缺失精神,所以停更了一段时间。但正是因为投入到事情傍边,去办理棘手的问题,反而可以进修到许多新对象。本日我就来分享一下我的项目碰鼻经验与总结。热腾腾、新鲜出炉的一线干货~

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

耍家任职于一家电商产物公司。双十一大促近在面前,我们想通过大量的动效来营造平台的勾当气氛。

因为近些年Lottie的盛行,前端动效落地的本钱比以前低了很多,岂论是动画视觉结果、前端事件绑定、动效文件巨细节制等等方面,Lottie让UI设计师在动效上的发挥空间获得了进一步的扩展。我们团队之前实施动效落地,也是一直回收的Lottie方案。(我之前也总结过Lottie的一些入门事项,可移步《相识图标类型,用Lottie动画让图标落地》)

但这次想到达的动效结果和之前的不太沟通。这一次因为干系到双十一大促勾当,我们想让动效气势气魄越发浮夸、惊喜。导致我们在运用Lottie的进程中,碰着了诸多问题。

厥后颠末各方面的请教与调研,这次我们筹备转战SVGA方案。

事情案例分享:SVGA动效落地的利用与避坑

*** 上关于SVGA的资料不少,但大大都不涉及到真实项目场景的细节还原。所以我筹备分享实例,好好讲一讲我为什么最终选择SVGA,以及如何执行、如何办理在这个进程中碰着的问题的。

这都是我本人一步一个坑踩出来的履历!但愿可以或许辅佐到你。

二、辛途经程

这次我们在Lottie上遭遇碰鼻,原因是因为Lottie矢量动画不支持部门AE直出的样式结果,导致我们必需思量以序列帧的 *** 去实现动画。

我们在AE中建造好的成就,导出json后在当地理会预览,结果不尽人意。到各端真机上演示还会再损失掉更多的样式结果。(原因是因为Lottie在差异情况中所支持的AE参数有所差别

以补助红包动效为例。为了给用户带来红包的惊喜、喜庆气氛,前期我构想的动效是但愿只管带有攻击感。拟3D的结果可以让红包的呈现看上去越发真实,而且在红包飞出进程中利用了发光结果。

事情案例分享:SVGA动效落地的利用与避坑

前期我们为了制止走进「序列帧动画」的胡同,基于我们团队在Lottie方面所具备的履历,我们但愿只管通过Lottie所支持的AE属性来实现矢量动画,这样在文件巨细、机能上都可以或许获得把控。

譬喻,我们知道Lottie是不支持AE结果器所直接填加的结果的。于是对付发光结果,我们并没有直接回收「结果-发光」去实现,而是通过「高斯恍惚+内发光+投影」的 *** ,从视觉上去模仿发光。也期许这样简朴的图层样式,可以或许被Lottie理会。

事情案例分享:SVGA动效落地的利用与避坑

但通过Bodymovin导出json后举办当地预览,呈现了这样的状况:内发光、投影结果和高斯恍惚都丢失了。结果很是生硬

相关文章

语音直播行业中,那些你不知道的“坑”!

语音直播行业中,那些你不知道的“坑”!

编辑导读:陪伴荔枝等平台的行业深耕,大量的语音主播得到了更多的创业时机,在视频风口事后,沉淀多年的语音直播也正迎来最大的风口。但仍然尚有很多的同学对付语言直播产物知之甚少,本文作者从自身事情实践出发,...

基于问题驱动策略的落地闭环

基于问题驱动策略的落地闭环

计策产物,互联网产物岗亭中的一个细分岗亭,但说起计策这件事,既不神秘也不高端,大部门产物司理日常所做的事情中多几几何都沾点边,只是你没有意识到做的是计策罢了;本文就来聊一聊如何做“计策”。 在表明什...

商场里排长队的小样派赠,是门什么生意?

商场里排长队的小样派赠,是门什么生意?

编辑导语:当我们逛街时,往往会遇到赠送小样的环境,无论是接管可能不接管,你有没有思量过小样派赠毕竟是门什么生意?本文作者通过亲身经验,来为我们解开小样派赠的神秘面纱。 尽量依然还在疫情期间,但线下贸...

CRM系统之销售场景还原与用户声音汇总

CRM系统之销售场景还原与用户声音汇总

由于ToB软件鲜少可以或许跟客户面劈面直接打仗,而需求的汇总与整理往往也不是一蹴而就的,因此需要筹备一个记事簿,可以或许用一句话随时随地记录来自差异行业、差异级此外用户的诉求,最终转化为抽象化的产物需...

SaaS产品如何设计商业化变现?

SaaS产品如何设计商业化变现?

近期蓝湖正式开启了贸易化收费模式,虽然也有免费尝鲜版本,对付低产值的白嫖党来说会引来一顿诉苦,虽然也有许多人愿意为好产物付费,对付一个产物,我们应该在什么时候设计推出收费尺度呢?本文环绕这个问题展开了...

论用户需求的起手三式:多样、多面与多变

论用户需求的起手三式:多样、多面与多变

做产品,尤其做互联网产品,我们有必要了解用户的三个特性:多样性、多面性与多变性。 当我们谈论用户需求时我们在谈论什么? 需求,很好理解。在特定的时间、场景、人物、动机、状态的框架内,故事是呈收敛性的...