| 动效方案 | 特性 |
|---|---|
| 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 |
