|
|
接近年底，工作繁多，缺失精力，所以停更了一段时间。但正是因为投入到工作当中，去解决棘手的问题，反而可以学习到很多新东西。今天我就来分享一下我的项目碰壁经历与总结。热腾腾、新鲜出炉的一线干货~
一、案例背景：为什么弃Lottie投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后进行本地预览，出现了这样的状况：内发光、投影效果和高斯模糊都丢失了。效果非常生硬
（责任编辑：网络） |
|
发表于 2020-10-28 00:00:00
