1实现原理 · 为什么它能做到
画线动画靠 dash 机制：把 stroke-dasharray 设为整条路径长度、dashoffset 也设为同值（不可见），再把 offset 动到 0 即逐段显现
skills/svg-animation/SKILL.md
Draw the dash array as long as the path, offset it fully (invisible), then animate the offset to 0.
注：给两种取长度方式：JS 的 getTotalLength()（最可靠）与零 JS 的 pathLength="1" 归一化技巧（免测量）。
形变的前提是两条 d 的命令数量与类型一致，否则需要 MorphSVG 或 Flubber 这类重采样库
skills/svg-animation/SKILL.md
Paths interpolate point-by-point, so a naive morph requires both `d` attributes to have the **same number and type of commands**.
注：给三条路线：GSAP MorphSVG（自动找映射并 convertToPath）、Flubber（无 GSAP 的插值器）、手写同构路径（图标切换）。
沿路径运动有三条实现路径（GSAP MotionPath、SMIL animateMotion 加 mpath、CSS offset-path），按是否需要滚动同步与库依赖选型
skills/svg-animation/SKILL.md
motionPath: { path: "#track", align: "#track", autoRotate: true, alignOrigin: [0.5, 0.5] },
注：同一需求给三种成本档，并给出选型表（CSS、SMIL、GSAP 各一行判据）。
渐变与滤镜也能被驱动（动 gradientTransform 或 stop offset 做扫光，动 feDisplacementMap.scale 与 feGaussianBlur.stdDeviation 做形变与对焦），但滤镜是 paint 重负
skills/svg-animation/SKILL.md
Filters are paint-heavy — animate sparingly and prefer `transform`/`opacity` where possible.
注：与同仓 60fps-animation 的成本口径一致，避免把滤镜动画当成免费操作。
交付前必须有 SVG 工程纪律：SVGO 不能删掉可动画依赖（cleanupIds、removeViewBox），且必须内联 SVG 才能被 CSS 与 JS 触及
skills/svg-animation/SKILL.md
keep `viewBox`, drop editor metadata, but disable `cleanupIds`/`removeViewBox` and any plugin that renames IDs you reference from CSS/JS/SMIL.
注：references 另给一份为动画调过的 SVGO 配置，把优化把动画步骤删掉这类事故前置拦住。
2核心能力
01描边画线（dasharray 与 dashoffset，含 getTotalLength 与 pathLength="1" 归一化、多路径 stagger）
02路径形变（GSAP MorphSVG、Flubber、手写同构路径三选一）
03沿路径运动与朝向（MotionPath autoRotate、SMIL animateMotion、CSS offset-path）
04渐变与滤镜动效（gradientTransform 扫光、feDisplacementMap、feGaussianBlur、feColorMatrix）
05驱动方式选型（CSS、SMIL、JS 的取舍表，含 SMIL 的支持与弃用注意）
06动画友好的 SVGO 配置与内联要求
07按驱动方式匹配的冻结 harness（SMIL 用 pauseAnimations 与 setCurrentTime；CSS 用 animationDelay 与 playState；GSAP 用 tl.seek）
08形变方案决策与手写图标切换（hamburger 与 close）等细节
09零 build 交付（单 HTML 内联 SVG，明确不要 bundler）
10可访问性判据：reduced-motion 下门控循环与大幅运动，保留静态终态
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | gsap 加 MorphSVGPlugin / MotionPathPlugin（可选：形变与沿路径运动） |
| package | flubber（可选：无 GSAP 的路径插值器） |
| cli | SVGO（可选：SVG 清洗与压缩，需关掉会破坏动画的插件） |
| api | 浏览器原语：SVGGeometryElement.getTotalLength()、SMIL animateMotion 与 mpath、CSS offset-path 与 offset-distance |
| network | 交付页可从 CDN 取 GSAP（产物期引用，不判级；正文未点名具体域） |
| cli | npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 内联第三方 SVG 的脚本面未被提示 — 内联 SVG（本 skill 的强制手法）可携带 script 与 onload 等事件属性；若把来路不明的 SVG 直接内联进宿主页面，等于执行其内联脚本。文档只谈 SVGO 清洗与 ID 保留，未提示该风险。
- SMIL 路径的取证依赖 helper 之外的手段 — seek-shot.sh 只能传 URL 参数，冻结 SMIL 需页面内自行调用 pauseAnimations 与 setCurrentTime；文档给了代码但未把它绑定到统一验收流程，SMIL 路径的自动化截图需自行接线。
- 许可声明不可核（见 second_pass） — MorphSVG 免费声明对商用有影响，仓库内无依据文件。
- 形变方案对路径结构有隐性要求 — 手写同构路径需设计侧配合（命令数量与类型一致），MorphSVG 与 Flubber 也非万能（点数差异过大时观感会崩）；文档给了决策表但无质量判据。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（skills/svg-animation/ = SKILL.md + 0 字节 README.md + references/svg-techniques.md，find 全量核对）：零脚本、零凭证、零写盘、执行期零外发（token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 零命中）。正文点名的 GSAP CDN 与 svgo、gsap、flubber 均为产物期或用户侧工具，不判级。注意点（不升档）：内联 SVG 是本 skill 的核心手法，若内联来路不明的第三方 SVG，其内联脚本与事件属性会在宿主页面执行——这是内联 SVG 这一技术的固有面，正文未提示。
5第二遍独立确认
- [ok] SMIL 的支持与弃用表述是否自洽 — SKILL.md 选型表给出 SMIL 适用面（自包含、无 JS bundle），并在 caveat 段说明 not supported in IE/old Edge and historically deprecation-flagged，要求滚动同步或最大兼容时改用 CSS 或 JS；references 第 4 节以三轴对比表重申，未夸大（未宣称 SMIL 已被移除）。
- [unlocatable] MorphSVG 是否真的免费可用（与 gsap-web 的免费声明同源风险） — SKILL.md 两次称 MorphSVG 在 GSAP 3.12+ 免费（**GSAP MorphSVG** (free as of GSAP 3.12)），但仓库内无上游许可文件可核，属外部事实声明，按文档声明记录（同仓 gsap-web 有同一处声明）。
- [ok] dashoffset 的两条取长度路线是否与 references 一致 — SKILL.md 的 Getting the length 两条（getTotalLength 与 pathLength="1"）在 references 的 getTotalLength gotchas 与 No-JS normalization with pathLength 两节展开，且都附代码，前后一致。
- [discrepancy] Packaged helper 的路径基准与适用性 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 在仓库根而非本 skill 目录；且 SMIL 驱动的冻结走 svg.pauseAnimations() 与 setCurrentTime()，helper 只替换 URL 参数，无法冻结 SMIL 时钟——对 SMIL 路径该 helper 失效。
6结论
适合：适合：① 图标、logo、签名的描边画线、擦除与多路径 stagger；② 图标状态切换形变（hamburger 与 close、播放与暂停）；③ 元素沿路径运动并自动朝向（含滚动同步的 GSAP 版）；④ SVG 渐变与滤镜动效（扫光、发光、位移）；⑤ 想用零 JS（SMIL 或纯 CSS 声明）交付的自包含矢量资产。
不适合：不适合：① 位图与视频素材类动效（非矢量对象）；② 复杂多元素时间线编排（走 gsap-web）；③ 需要像素级或逐帧渲染控制的场景（走 canvas 与 WebGL 类 skill）；④ 必须覆盖 IE 与旧 Edge 且不能引 JS 的环境（SMIL 与 CSS offset-path 都不可用）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 svg-animation.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent7a0047bb3c20631d…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/web-animation-skills
原始 GitHubiart-ai/web-animation-skills ↗
Stars28
最近推送2026-06-22
本 skill commit
b6dba3eb75许可MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。