需求需要在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这种本地文件实现。
json原先