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

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

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

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

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

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

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

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

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

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

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

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

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

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