Lottie 动画
Lottie
中级通用Lottie 是一种用 JSON 描述的矢量动画格式：设计师在 After Effects 等软件里做好动画，用插件导出成 JSON，网页或 App 里的播放器再按这份描述逐帧画出来。它体积小、放大不糊、背景透明，还能用代码控制播放、换颜色。
你可能会说：「设计师做了一个上传成功的动画，给 GIF 太糊，能不能用那种很清晰、还能改颜色的动画格式？」
读之前建议先了解
动手看看同一个打勾动画的三种格式
要点Lottie 是怎样起作用的？
- 1
存的是形状和关键帧，不是图片
GIF 和视频存的是一张张像素图，放大就是把像素拉大，边缘发糊、出锯齿。Lottie 文件里存的是「有哪些形状、在第几帧位置和颜色是多少」，播放器（网页常用 lottie-web 或 dotLottie 播放器，App 有对应的 iOS、Android 库）每一帧现场按矢量画出来，所以放多大都清楚，背景天然透明，深色页面上也不会留白边或白方块。
- 2
可以用代码控制
因为是现场绘制，播放器能做的事比 GIF 多：暂停、倒放、跳到某一帧、只循环播放其中一段（比如加载时循环「转圈」那段，完成后播「打勾」那段），还能在代码里改颜色以适配主题。用 GIF 想做这些，只能回到设计软件里改好再重新导出一份。
- 3
要注意的代价
Lottie 需要引入播放器库，有几十 KB，只为一个小图标引入不划算，页面里多处用到时才值得。并不是 After Effects 的所有效果都支持，模糊、粒子、部分表达式等可能导出后不显示或走样，所以导出后一定要在真实播放器里检查一遍。动画如果包含大量图层或嵌入了位图，JSON 也会很大、播放时占 CPU。简单的图标动画，用 CSS 或 SVG 直接写可能更轻。
容易混淆的地方
Lottie 是一种动画文件格式和配套播放器，不是 CSS 动画：CSS 动画是开发者在样式里写关键帧，Lottie 的关键帧由设计软件导出。它也不适合替代视频：真实拍摄的画面、复杂写实的场景用视频更合适，Lottie 擅长扁平风格的图标、插画和界面动效。
什么时候用
适合用
- 上传成功、支付完成这类结果页的打勾动画，需要清晰、透明背景、适配深浅色主题。
- App 引导页或空状态里的插画动画，由设计师在 AE 里做好直接交付给开发。
- 加载中循环播放一段、完成后播放另一段的状态动画，需要用代码控制播放区间。
不适合用
- 只是一个按钮悬停时轻微变色或缩放，别引入整个 Lottie 播放器；用 CSS 过渡就够了。
- 产品宣传里的真实拍摄画面，别试图做成 Lottie；用压缩好的视频。
- 设计稿里用了大量模糊、粒子等特效时，别直接导出就上线；先在播放器里核对，或改用视频。
练一练选一个答案，看看解释
你的网站有浅色和深色两套主题，设计师交付了一个「上传成功」的打勾动画。哪种格式最合适？
让 AI 帮你做复制给 AI Agent 直接用
请把【需要替换的动画，如：上传成功页的打勾 GIF】改用 Lottie 播放。先检查项目里是否已有 Lottie 播放器依赖，以及这类动画在哪些页面使用；如果需要新增依赖，先说明体积和理由再动手。要求：动画文件放在静态资源目录并按需加载，不打进主包；颜色跟随当前主题（浅色和深色）；需要分段时用帧区间控制（如加载段循环、完成后播放打勾段）；组件卸载时销毁播放器实例；开启减少动效时直接停在最后一帧。不改无关代码。最后说明怎样验证：放大到 3 倍仍清晰，深色主题下没有白边，切换页面后没有残留的播放器。