Web 与 Flutter 同时支持的动画格式

格式对比

1. Lottie（JSON）⭐ 最推荐

After Effects 导出的矢量动画格式。Web 端通过 lottie-web，Flutter 端通过 lottie 包，两端均有成熟支持。文件体积小、支持缩放、性能优秀。

2. Rive（.riv）⭐ 交互首选

类似 Lottie 的交互式矢量动画方案。Web 和 Flutter 都有官方 SDK，支持状态机和实时交互，适合需要动态控制的场景（如按钮状态切换）。

3. Animated WebP

Google 推出的格式，压缩率优于 GIF，支持透明通道。Web 浏览器广泛支持，Flutter 也原生支持。

4. APNG（Animated PNG）

支持透明度和更丰富的色彩深度。Web 主流浏览器已支持，Flutter 可通过图片组件加载。文件体积比 GIF 大。

5. GIF

最基础的兼容格式，两端原生支持。但文件大、色彩有限（256色）、无透明度渐变，仅适合简单低帧动画。

6. SVG 动画（SMIL / CSS）

Web 原生支持，Flutter 需借助 flutter_svg 等包（对 SMIL 动画支持有限），更适合简单的矢量动画。

---

推荐优先级

Lottie > Rive > Animated WebP > APNG > GIF

---

选型建议

• UI 微交互 / 品牌动画 → Lottie
• 需要交互控制的动画 → Rive
• 简单循环动画（替代 GIF） → Animated WebP
• 需要高质量透明动画 → APNG
• 最大兼容性、无特殊需求 → GIF