Name: diagram-animation
Author: iart-ai/explainer-video-skills

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

全文执行主轴是「渐进式揭示」：一次只推进一个信息节拍，揭示顺序固定为 nodes → edges → labels，并配「聚焦 + 上下文」（活动元素满不透明、其余压到 ~0.35）避免观众迷失。

skills/diagram-animation/SKILL.md

Never show everything at once. Reveal in this order: **nodes → edges → labels**.

注：这是裁决规则而非建议：后文每个代码片段（节点 scale-in、边 dashoffset、标签 fade）都只是它的实现。

画线类动效统一走 stroke-dashoffset 机制，并用 pathLength="1" 把几何长度归一化成 0→1 的进度值，因此同一套 dash 参数可驱动任意长度的边。

skills/diagram-animation/SKILL.md

`pathLength="1"` lets one dash value drive any edge length.

注：归一化是它敢把「边 / 折线 / 路线」三类画线写成同一份代码的原因。

图表动效给三件最小可运行实现：柱体自基线 scaleY 生长、折线 getTotalLength + transition 绘入、数字用 rAF + easeOutCubic 插值累加并配 Intl.NumberFormat 千分位。

skills/diagram-animation/SKILL.md

| Count-up | interpolate value with eased `t` | `easeOutCubic` |

注：同一张 Quick reference 表把每类动作钉到具体属性 + 缓动，是把审美判断编译成可复核参数的关键。

交付按层级分轨：自包含图表 = 单文件 HTML（内联 SVG + CDN 库 + 一个内联 script 主时间轴），且页面必须支持 ?t=N 冻结，使无头截图落在确定性画面上。

skills/diagram-animation/SKILL.md

if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }

注：冻结能力被写进输出契约而非当作可选调试手段——这是它验证回路成立的前提。

验证回路 = 在 start / mid / end 三个时刻无头截图，人眼核两件事：保真度（揭示顺序、连线落点、count-up 是否落在精确值）与工件（截断标签、离屏节点、字体 FOUC、接缝卡顿）。

skills/diagram-animation/SKILL.md

count-ups land on the EXACT values

注：把「数字是否恰好等于数据源的值」列为验收项，直指图表动效最常见的失真。

reduced-motion 给的是终态分支而非降级动画：循环类动效直接 animation:none，展示已合成的最终图。

skills/diagram-animation/SKILL.md

`prefers-reduced-motion` path shows the final composed diagram without looping motion.

注：同类文档常只写「减少动效」，它把终态明确成「全部节点可见、边全画完、计数到终值」。

2核心能力

01渐进节点 / 边 / 标签揭示（GSAP 主时间轴 + stagger + 边 dashoffset 绘入）

02流式连接线：marching dash 循环 + offset-path 行进点（纯 CSS，无 JS）

03动画图表三件套：柱 grow / 线 draw-on / 数字 count-up

04多技术栈落地选择：内联 SVG+GSAP/CSS、Framer Motion（React）、D3 transition、Mermaid/Excalidraw 出图再动画、Remotion 视频导出

05D3 数据绑定动效（transition / tween 做生长与计数）

06Remotion 帧驱动确定性渲染（同一图每次渲染得同一 PNG 序列 / MP4）

07?t=N 冻结 harness：GSAP / SMIL / CSS 三条路径各有冻结方案

08序列图 / 架构图配方：先铺区域，再节点、边、标签，逐条消息揭示并留 hold 让读者读完

3外部依赖

类型	依赖
cli	npx / Playwright（无头截图）
cli	ffmpeg（contact-sheet.sh 拼图）
cli	npx -y playwright（仓库根 seek-shot.sh 内部）
network	jsDelivr CDN：gsap ESM（交付物在浏览器端加载）
package	第三方动画/图表库：GSAP、Framer Motion、D3、anime、Remotion（自 CDN 或 npm 引入）

4风险提醒风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用

复核回路引入远程包与浏览器二进制 — 跑一次验证即从 npm 拉 playwright 并下载 Chromium；离线/内网或代理受限环境会失败，且属供应链接触面。可改用本地已装的 Playwright/浏览器或人工截图完成同一回路。
产物期 CDN 依赖（jsDelivr） — 交付 HTML 引远端 ESM 且未锁版本；CDN 变动或被投毒会直接影响成品的浏览器端行为。建议固定版本或把库内联进单文件。
跨 pack / 跨目录引用悬空 — `scripts/` 在仓库根、`remotion-video` 属另一 pack；只安装 skills/diagram-animation 时这些引用无法兑现。
「数字落到精确值」靠人工核对 — 契约要求 count-up 落在数据源的真实值并列为验收项，但没有自动断言/快照比对；批量高频使用时应自行加数值断言。
教学型默认参数易被照抄 — 0.5–1.5s hold、stagger 0.06s、dim opacity .35 等是通用起点而非针对具体画面的结论；脱离信息密度照搬会让节奏失真。

风险提醒：橙色，评估后使用。判级对象是 skill 自身目录（skills/diagram-animation/：SKILL.md + references/ + 0 字节 README.md；目录内无脚本、无凭证、不写盘）。触发橙档的是它规定的复核回路与交付形态：① SKILL.md 的 Verify loop 直接内联 `npx playwright screenshot …`，所引用的仓库根 helper `scripts/seek-shot.sh` 内部是 `npx -y playwright screenshot`——npx 从 npm registry 取包并首次下载 Chromium 二进制，落入分级范式「依赖第三方插件、镜像、远程包」（同作者 pack 先例：logo-animation 同因判橙）；② 交付物在浏览器端从 cdn.jsdelivr.net 取 gsap 等 ESM（产物期引用，按批4 细则不计为执行期外发，仅列明）。skill 本身不读凭证/env、不调业务 API、不采集、不绕过防护，故非红档，也不构成「读凭据」型橙档。触发条件：只有真正跑复核回路（截图/拼图）时才发生远程拉取；纯写 HTML 或人工在浏览器查看不触发。

5第二遍独立确认

[ok] 外部依赖调用点复核（npx playwright / ffmpeg / CDN） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/diagram.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 同为 npx playwright 截图、scripts/contact-sheet.sh 为 ffmpeg hstack；SKILL.md 顶部代码块确有 cdn.jsdelivr.net 的 gsap ESM import。三条均落地，非推测。
[ok] 无凭证 / 无 env / 无业务 API 反查 — skill 两个文档与三个仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无 fetch 到业务端点；唯一远程动作是包管理器与 CDN 静态资源。判 orange 的依据只是「远程包/镜像」，不含凭据读取。
[ok] 目录资产面清点 — skills/diagram-animation/ 下仅 SKILL.md（163 行）、references/ 一份 218 行 cookbook、0 字节 README.md；无 scripts/、无模板、无数据文件——「纯指令 + 内联代码片段」结论成立。
[discrepancy] 跨引用可解析性 — SKILL.md 有两处引用落在本 skill 目录外：`scripts/seek-shot.sh`/`scripts/contact-sheet.sh` 位于仓库根（单装本 skill 目录会悬空，需装整个 repo）；`see remotion-video` 指向的 remotion-video 不在本 repo 的 5 个 skill 中（属同作者 motion-design-skills pack），同样悬空。同 repo 内的 whiteboard → explainer-video 引用可解析。
[ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 SVG / Framer Motion / D3 / Remotion 四栈，正文 Build-tool choice 逐栈给出适用判据，reference 给出对应可运行实现（Framer Motion pathLength、D3 数据绑定、Remotion spring/interpolate）；无夸大，也未声称能自动出图或代跑渲染。
[ok] 「确定性」主张的成立条件 — 成立范围有明确边界：GSAP/JS 主时间轴的 ?t 冻结与 Remotion 帧驱动路径可逐帧确定；而 CSS keyframes/transition 分支本身不可 seek，SKILL.md 明确要求「drive reveal order with `animationDelay`; freeze by pausing/seeking the equivalent JS timeline」并给出 prefers-reduced-motion 终态——主张非无条件承诺。

6结论

把「一次只讲一件事」变成不可协商的执行顺序，直接治疗「信息一次性倒出」的通病

机制抽象干净：pathLength=1 归一化 + 单个 dashoffset 进度值，让边 / 折线 / 路线共用一个实现

交付 + 验证闭环具体到可执行命令（单文件 HTML + ?t 冻结 + 三帧截图 + 保真/工件两份检查单）

reduced-motion 不是「少动一点」的口号，而是明确指定终态

适合：适合把已有静态结构（架构图、流程图、序列图、数据图表）做成按步骤揭示的网页动效或视频片段；尤其适合以「可复核的确定性画面」（?t 冻结 + 三帧截图）作为交付门槛的团队，并可与同 repo 的 explainer-video（整片叙事层）、whiteboard-animation（手绘层）组合使用。

不适合：不适合需要完整叙事与配音的长片（应走 explainer-video 或视频类 pack）；不适合纯装饰性、无信息结构的炫技动效（其全部规则都服务于可读性）；也不适合只要一张静态图表、不需要时间维度的任务。

安装 agent 直装可复制

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

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

sha256: e196243bfb566372…

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

安装指南

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

② 上游 GitHub · 原始来源

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

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

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/explainer-video-skills

原始 GitHubiart-ai/explainer-video-skills ↗

Stars26

最近推送2026-06-22

本 skill commit3e2d411b72

本站信息

收录日期2026-09-06

分类内容创作

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

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

diagram-animation

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

2核心能力

3外部依赖

4风险提醒 风险提醒：橙色 · 评估后使用

5第二遍独立确认

6结论

4风险提醒风险提醒：橙色 · 评估后使用