1实现原理 · 为什么它能做到

定位为 After Effects 到产品的桥：把矢量动效编成 JSON 或 zip 容器，由运行时播放，从而与分辨率和平台解耦

skills/lottie-animation/SKILL.md

The bridge from After Effects to product: vector animation shipped as JSON (or zipped `.lottie`), tiny and resolution-independent, played by a runtime on web, iOS, Android, and React Native.

格式取舍明确：.lottie（zip 容器，常小 60–80%，可带多动画与主题）优先；lottie-web 只在遗留 .json 加 SVG 渲染器场景使用。

播控以帧、段、模式三件套为核心 API，并用 load/complete/frame 事件做状态机式编排

skills/lottie-animation/SKILL.md

dotLottie.setSegment(30, 90); // constrain playback to a frame range (e.g. a "loading" loop)

给播 checked 段、听 complete、再 setSegment 回 idle 循环这类产品级状态机写法。

滚动驱动不需要动画库：autoplay:false 加滚动进度映射到帧（clamp 0..1 后乘 total-1），或交给 lottie-interactivity 声明式配置

skills/lottie-animation/SKILL.md

dotLottie.setFrame(p * (total - 1));

这条让 Lottie 在不引 GSAP 的前提下吃到滚动交互，是它相对 gsap-web 的差异化能力。

运行时换肤两条路：.lottie 内嵌命名主题（setTheme/loadTheme，无需重导）与手动遍历 layers[].shapes[] 改色值的脆弱补丁

skills/lottie-animation/SKILL.md

load the JSON, walk `layers[].shapes[]` and patch `c.k` color arrays (normalized 0–1 RGBA), then init the player with the modified object. Brittle

明确标注哪条推荐（themes）、哪条是最后手段，避免被当成常规做法。

导出侧给清单：Bodymovin 导出流程与 AE 表达式、多数效果不被支持的已知缺口，解释了预览对但进产品就不对的主因

skills/lottie-animation/references/integration-and-export.md

**Expressions** — not evaluated by runtimes. Bake expression-driven motion to keyframes (Bodymovin can pre-render some) or remove. Heavy-expression rigs are the #1 source of "looks wrong in product".

把不可迁移特性逐条列出并给替代做法，是这条流水线里最容易被忽略也最值钱的一段。

2核心能力

01Web 集成双路径（@lottiefiles/dotlottie-web 原生与 dotlottie-react 包装）

02播放控制与事件（play/pause/stop/setSpeed/setMode/setFrame/setSegment 与 load/complete/frame）

03滚动与交互驱动（手写进度映射，或 lottie-interactivity 的 scroll/hover/click/cursor 模式）

04运行时主题与换色（内嵌主题优先，手动 patch 为最后手段）

05移动端对齐（lottie-ios / lottie-android / lottie-react-native 的等价进度与段概念）

06优化清单（.lottie 优先、IntersectionObserver 懒播暂停、渲染器选择、AE 合成瘦身、运行时换色替代多份导出）

07帧级冻结 harness（?t=N 走 setFrame，并读 totalFrames 作为结束帧依据）

08AE 不支持特性清单与替代做法（导出前自检）

09零 build 交付（单 HTML 引运行时，明确不要 bundler）

10可访问性判据：prefers-reduced-motion 下不自动播放循环，给静态帧或播放控件

3外部依赖

Kind	Dependency / Endpoint
package	@lottiefiles/dotlottie-web（首选现代运行时：canvas 加 WASM）
package	@lottiefiles/lottie-interactivity（声明式交互模式）
package	lottie-web（遗留 .json 加 SVG 渲染器路径）
network	交付页从 CDN 取 dotLottie 运行时（产物期引用，不判级；正文未点名具体域）
package	移动端运行时：lottie-ios / lottie-android / lottie-react-native
cli	npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg）

4管控建议与判定依据

建议配套管控措施

面向 Agent

声明可访问域名与密钥范围

面向管理者

密钥最小权限，保留请求日志

判定依据（文件路径与关键语句摘要）

网络端点: 声明外部网络访问: 执行期零外发；正文示例含 fetch("/icon.json")（相对路径取本地资产，不是外发）
本地工作目录: 文件读写与工件输出: 本 skill 目录零写盘；交付物 1 个自包含 .html（运行时加 canvas 加 .lottie/.json 相对文件或 data URL）

审计说明： 。判级只依据 skill 自身目录（skills/lottie-animation/ = SKILL.md + 0 字节 README.md + references/integration-and-export.md，find 全量核对）：零脚本、零凭证、零写盘、执行期零外发（token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 中，唯一命中是本 skill references 的 fetch("/icon.json")——相对路径取本地资产，非网络外发）。正文点名的都是 npm 包（用户项目安装）与 CDN 运行时（产物期引用，未点名具体域），不判级。

5第二遍独立确认

[unlocatable] .lottie 比 .json 小 60–80% 这一数字 — SKILL.md 写 .lottie often 60–80% smaller，但源码内无基准、无样例文件（本 skill 目录不含任何 .lottie/.json 资产），属外部经验值，记为文档声明，不作已验证事实。
[ok] 唯一的 fetch( 命中是否构成外发 — references/integration-and-export.md 的 const json = await fetch("/icon.json").then((r) => r.json()); 使用相对路径，取同源本地资产（用于手动改色），不构成网络外发；该写法位于 Manual color patching (last resort) 小节，正文亦标注为脆弱手段。
[ok] 运行时 API 名称是否自洽（setFrame/setSegment/setMode/totalFrames） — SKILL.md 的 Playback control 段、Quick reference 表、冻结 harness 段与 references 第 1、3 节对同一组方法名（setFrame/setSegment/setSpeed/setMode/setTheme/totalFrames/play/pause/stop）表述一致，并明确区分 lottie-web 的 goToAndStop(N, true) 等价写法。
[discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 在仓库根；且本 skill 的冻结单位是帧（?t=42），而 seek-shot.sh 把 ?t= 当秒数传参——即使路径正确，语义也需按帧自行换算。

6结论

唯一覆盖设计到工程全链路的 skill：接入、播控、换肤、移动端对齐、AE 导出清单齐全

滚动驱动不依赖 GSAP，给了 setFrame 进度映射与 lottie-interactivity 两种成本路径

把 AE 不支持什么写成清单，直接对应预览对、上线不对的真实故障

换肤路径分级清楚（内嵌主题优先，手动 patch 明标 Brittle）

适合： 适合：① 把设计师的 AE 动效上线到 web / iOS / Android / React Native 的交付链路；② 循环插画、引导页、空状态、图标动效与状态机式播放（loading 到 success）；③ 需要滚动、悬停、点击、光标驱动的矢量播放；④ 需要运行时换肤以复用同一份动画；⑤ 需要一份 AE 导出前自检清单以避免上线后走形。

不适合： 不适合：① 需要代码原生编排的复杂时间线或滚动叙事（走 gsap-web）；② 只用 CSS/SVG 手绘即可的轻量图标动效（走 svg-animation）；③ 离线且不便携带运行时文件的环境；④ 依赖大量 AE 表达式或效果且未做烘焙的资产——上线必然走形，本 skill 只能提示重做而不能自动修复。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload lottie-animation.tar.gz

sha256: d36e9095939adbd5…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit b6dba3eb75.