Name: lottie-animation
Author: iart-ai/web-animation-skills

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外部依赖

类型	依赖
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风险提醒风险提醒：绿色 · 放心使用

风险提醒：绿色 · 放心使用

产物资产（.lottie/.json）来自设计侧或第三方下载，格式风险由运行时尚承担 — 本 skill 不含任何资产样例与校验脚本，也不提示来源校验；畸形或超大文件会带来解析开销与渲染异常（references 的性能段只谈层数与关键帧数量）。
运行时换色的脆弱路径有被误用风险 — 手动遍历 layers[].shapes[] 改 c.k 的写法虽标为 last resort，但给出了完整可抄代码（fetch 加 patch），结构一变即静默失效。
依赖 npm 或 CDN 运行时，非零依赖交付 — 与同仓零依赖单文件交付的 skill 相比，本 skill 的交付页必须引 dotLottie 运行时，离线环境需自带运行时文件。
交付页 CDN 域未点名，且 Packaged helper 的帧与秒语义不一致（见 second_pass） — 运行时需自选可信 CDN；scripts/seek-shot.sh 相对路径在单装形态下不成立，且按秒传参与本 skill 的帧语义不一致。

风险提醒：绿色，放心使用。判级只依据 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 只能提示重做而不能自动修复。

安装 agent 直装可复制

① 本站镜像更新 2026-09-28

方式 A · 人下载镜像包下载 lottie-animation.tar.gz

sha256: d36e9095939adbd5…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

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

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit b6dba3eb75；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/web-animation-skills

原始 GitHubiart-ai/web-animation-skills ↗

Stars28

最近推送2026-06-22

本 skill commitb6dba3eb75

本站信息

收录日期2026-09-06

分类设计

侦查报告AI 侦查 · 2 遍 · 2026-09-06

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

lottie-animation

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

2核心能力

3外部依赖

4风险提醒 风险提醒：绿色 · 放心使用

5第二遍独立确认

6结论

4风险提醒风险提醒：绿色 · 放心使用