Lottie 与 GIF、PNG 序列、SVG、AVD 的取舍对比

不是所有场景都适合 Lottie

动效交付方案有好几种，每种都有适用边界。选之前先想清楚你的动效是什么类型、在什么平台、需要什么程度的交互。

逐一对比

GIF 动图

• 优点：零依赖，任何浏览器和 App 都能直接显示；制作门槛极低。
• 缺点：最大 256 色；体积大（一段 5 秒的中等复杂度动效，GIF 通常 500KB 起步，Lottie JSON 可能 50KB 以内）；不能缩放（像素级）；没有交互；不支持透明通道（严格说支持但会有锯齿）。
• 适用：社交平台表情包、评论区小动图——这些场景 Lottie 根本进不去。

PNG / WebP 序列帧

• 优点：比 GIF 质量好得多（真彩色、透明通道）；视觉保真度最高——拍出来什么样就是什么样。
• 缺点：体积是 Lottie JSON 的 30~50 倍；和 GIF 一样不能缩放、没有交互、像素密度不对。
• 适用：极复杂的逐帧手绘动画（比如《你的名字》里的粒子特效）——矢量格式表达不了的东西。

SVG + SMIL / CSS 动画

• 优点：矢量、可缩放、浏览器原生支持；CSS/SMIL 零依赖；SVG sprite + CSS 动画在 Web 端很灵活。
• 缺点：跨浏览器一致性一直是坑（IE 不支持 SMIL）；复杂动效写 CSS keyframe 会非常痛苦；设计端导出 SVG 后仍然需要开发端手写动画逻辑；Android/iOS 原生不支持 SVG 动画。
• 适用：纯 Web 端、简单的 loading/spinner、hover 动效——用 CSS 写比引入 Lottie SDK 还轻。

Android Vector Drawable（AVD）

• 优点：Android 平台原生支持；和 XML drawable 无缝集成；渲染在 RenderThread 上，性能优秀。
• 缺点：只有 Android 能用；Lottie 的一个子集，不支持 text、动态颜色、复杂表达式；进度无法手动控制；无法远程加载。
• 适用：Android 原生项目里的简单矢量图标动画——如果不需要跨平台，AVD 比 Lottie 更原生。

Lottie（Bodymovin JSON）

• 优点：矢量可缩放；跨平台原生渲染一致；JSON 体积小（通常 < 50KB）；完整支持 AE 动画特性；可通过 API 控制播放/暂停/跳转；可远程加载热更新。
• 缺点：需要引入 SDK（Web 端约 40KB gzip，Android/iOS 端更多）；不支持一些 AE 高级特性（表达式需要预烘焙）；复杂 3D 层不支持。
• 适用：App 和 Web 里的品牌动效、引导动画、状态切换——设计端 → 开发端一条链到底。

一张决策表