H5动画新利器:Svga和Lottie带你开启互动时代 |
您所在的位置:网站首页 › svga格式动画怎么打开 › 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这种本地文件实现。 json原先 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |