除了使用 CSS 、SVG来实现动画效果之外，复杂的动效实现方式有以下几种
| 方式 | 优点 | 缺点 |
|---|---|---|
| GIF | 制作简单、兼容性强 | 不支持半透明通道，失真严重，颜色丢失较多，锯齿明显，体积较大，运行占用内存大 |
| PNG 序列 | 动画流畅、保真度高、支持各类动效输出；开发可调控速度 | 启动时需加载所有图片资源，文件过大，内存占用高，容易卡顿 |
| APNG | 色彩保留度高，流畅度高、支持透明通道、并且不会有锯齿和颗粒感 | 导出步骤较多 |
| Webp | 与 Apng 类似，体积小，流畅度高，支持透明通道，在 H 5 环境中加载速度快 | 少部分场景会有兼容性问题 |
| Lottie（JSON） | 矢量的、纯代码输出，体积不受帧率和尺寸限制，运行占用内存小 | 部分 AE 效果不支持，目前多用于 IOS 与安卓平台，且对系统版本有一定要求 |
| SVGA | 保真度高，视觉效果上佳，礼物都炫酷动效皆可，文件小，性能优越，兼容多平台 | 制作较复杂，通常智能识别 AE 基础动效，其他效果需转为位图再导出；开发工作相教 GIF 文件略大 |
| MP4 | 兼容性强，普及度高 | 不支持透明通道，体积较大 |
体积对比
MP4 > PNG 序列 > APNG > Webp > GIF > SVGA > Lottie
场景建议
- GIF 动图：简单的视觉动图，小尺寸 Banner、活动页装饰动效、界面悬浮的动态入口等
- PNG 帧序列：变化较少的动态效果，操作引导、入口闪动提示、部分加载效果等
- SVGA：较为复杂的视觉动效，礼物动效，炫酷开场动效等
- Webp/Apng: 大尺寸的 Banner、活动氛围背景、活动页头图等
- Lottie JSON: 简单的交互动效，按钮 icon 交互、logo 启动效果、矢量插图动效等
- MP 4: 启动界面动画、大型活动的宣传介绍（双 11、618 做任务瓜分现金红包活动）