iOS 图片使用探究(2)-- iOS 动效方案对比
2021-12-21 本文已影响0人
topws1
动效方案 | 特性 |
---|---|
SVGA | 支持跨端、高效(动画由设计师实现)、高性能(播放性能优于GIF、WebP,需测试)、文件小、支持交互(动画中插帧)、开源 |
Lottie | 支持跨端、高效(动画由设计师实现) |
GIF | 支持跨端、Gif图实质上就是把一帧帧的静态图片打包到一起,打成一个压缩包(实际可能并不小) |
WebP | 类似于GIF,但是同等效果下 文件比GIF小 |
MP4 | 标准的数字多媒体容器格式,以存储数字音频及数字视频为主,也可以存储字幕和静止图像 |
APNG | 继承自PNG的文件格式,类似GIF一样播放动态图片,并且拥有GIF不支持的24位图像和8位透明性。APNG的第一帧是普通的PNG。通过对比GIF、APNG和WebP,可以看出APNG在质量相同的时候有着更小的体积(结论来自WIKI) |
动效对比 | 使用场景 | 优点 | 缺点 | 占用内存(分高内存占用低) | 质量稳定对比 | 展示效果得分 | AE动效支持 |
---|---|---|---|---|---|---|---|
APNG | App 大部分动效场景都可以使用apng,icon动效、标签动效、部分加载、按钮动效等 | 动画流畅,保真度高 | 体积较大,内存占用搞,透明叠加图片存在失真问题 | 3 | 3 | 3 | 4 |
WEBP | 与apng使用场景相同,使用判断条件:APNG大于2M的时候,尝试使用,具体也看视觉效果 | 不参与 | 不参与 | 不参与 | 不参与 | ||
SVGA | 多使用于页面氛围背景动效,范围大,动效简单,元素重复率高的动画 | 保真度高,体积小 | 手机耗能大,部分平台不支持(PC端) | 4 | 4 | 4 | 2 |
MP4 | app中引导性质的全屏动图和部分大弹窗动图,同事动效时长较大的动画(时长>10s)(低电量模式下,H5页面无法自动播放),效果 炫酷,全屏这种,纯播放的再使用 | 播放流畅,体积小 | 存在色差,循环动效效果差,不支持透明底,兼容性差 | 1 | 2 | 2 | 5 |
GIF | 表情包 | 兼容性强 | 体积大、质量差,尤其是透明背景时毛边明显 | 2 | 1 | 1 | 3 |
Lottie | 动效可支持交互(svga也可在动画中插帧) | 动效支持交互,文件小,性能高 | 酷炫的动效难实现 | 5 | 5 | 5 | 1 |