svga文件如何查看_工作案例分享：SVGA动效落地的使用与避坑

原文地址：UCD耍家(公众号)

作者：Howiet

今天我就来分享一下我的项目碰壁经历与总结。热腾腾、新鲜出炉的一线干货~

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

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

因为近些年Lottie的风行，前端动效落地的成本比以前低了许多，不论是动画视觉效果、前端事件绑定、动效文件大小控制等等方面，Lottie让UI设计师在动效上的发挥空间得到了进一步的扩展。我们团队之前实施动效落地，也是一直采用的Lottie方案。(我之前也总结过Lottie的一些入门事项，可移步《了解图标落地，让前端再爱你一次》)

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

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

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

这都是我本人一步一个坑踩出来的经验！希望能够帮助到你。

二、辛路历程

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

我们在AE中制作好的成果，导出json后在本地解析预览，效果不尽人意。到各端真机上演示还会再损失掉更多的样式效果。(原因是因为Lottie在不同环境中所支持的AE参数有所差异)