H5动画新利器：Svga和Lottie带你开启互动时代

 

需求需要在h5页面中做复杂动效，调研了几种常用的方案，跟UI一起尝试。

调研

占用内存对比：

从大到小： 视频＞序列帧＞GIF＞APNG/WEBP＞LOTTIE/SVGA

质量稳定对比：

从差到好： 视频＜GIF＜序列帧＜APNG/WEBP＜LOTTIE/SVGA

支持AE动效对比：

从多到少：视频＞GIF＞序列帧＞APNG/WEBP＞LOTTIE/SVGA

业务方案：

- gif虽然体积小、兼容性好、但效果差、不推荐使用、除非非常在意多端兼容性与性能！

- 简单的动图采用webp、比如简单的聊天表情动图（骰子、石头剪刀布等）

- lottie适合一些复杂的动画、比如复杂的加载动画、引导动画等、不适合做直播间大礼物特效

- 直播间复杂的大礼物动可以用效用svga,webp还有apng

- MP4不建议做直播间礼物动画防范

这里我们的需求是需要较复杂的动效，并且希望可配置，一键替换动效文件，svga和lottie比较符合我们的需求。gif图文件太大，并且不好精细操作；而序列帧也是一样的问题，并且不适合做配置替换。

另外调研阶段发现腾讯出了一款PAG，号称全面支持AE动效，UI也一并做了动效导出。

发现PAG在h5端加载慢，原因是它除了js包和动画文件以外，还要额外引入一个几M的web assembly的包。感觉PAG更适合app这种本地文件实现。