1实现原理 · 为什么它能做到
唯一铁律：先设计好静态构图（每个元素都在终位），动画只决定「何时出现」，绝不决定布局。
skills/animated-infographic/SKILL.md
A great animated infographic is a great *static* infographic that happens to move. Lay out and balance the full composition — every icon, number, and label in its final position — before adding a single keyframe.
直接针对最常见失败：元素飞到从未设计过的位置。
揭示顺序＝视觉层级（标题→图标→数字→标签→连线），不是版面顺序。
skills/animated-infographic/SKILL.md
Reveal order *is* the hierarchy. The eye follows appearance, so animate elements in importance order, not layout order.
reference 把层级翻译成 ICON/COUNT/LABEL/CONNECTOR 四个 offset 常量。
数字精度的两条硬要求：先四舍五入再格式化，且用 tabular-nums 固定字宽。
skills/animated-infographic/SKILL.md
Interpolate the underlying number, ease it, then format on render. Two musts: **round before formatting**, and use `tabular-nums` so the layout doesn't jitter as digits change.
插值只发生在底层数值，上屏前必定取整格式化。
同一时刻只允许一个数字在动：观众一次只能追一个运动物体。
skills/animated-infographic/SKILL.md
One loud thing at a time — never count two numbers at once.
reference 用 STEP_STRIDE=48 帧对 counter 的 30 帧形成互斥窗口。
级联 stagger 用 6–10 帧，同组兄弟共用一条 enter 曲线。
skills/animated-infographic/SKILL.md
A stagger of 6–10 frames feels crisp; above ~15 it drags.
reference 取 STAGGER=8（30fps 下约 0.27s）。
连线在「源元素已出现、目标尚未出现」的间隙里画入，用视线引导下一次揭示。
skills/animated-infographic/SKILL.md
Draw the connector *between* the two items it joins, in the gap after the source appears and before the target — the line leads the eye into the next reveal.
实现是 SVG path 的 strokeDashoffset 画入。
数据驱动 + 渲染前校验：steps 必须 3–5 项、value 必须有限、icon 必须是已知键。
skills/animated-infographic/references/sequenced-infographic.md
Validate before rendering: confirm `steps.length` is 3–5, every `value` is a finite number, and `icon` is one of the known keys — bad data should fail loudly, not render a broken frame.
与 chart-animation 对「静默 NaN」的忧虑同源。
验证环特别针对数字：still 检查能在编码前抓到错误统计值或跑出画布的 stagger。
skills/animated-infographic/SKILL.md
The infographic carries **key numbers**, so still-inspection catches a wrong stat or a stagger that lands off-canvas before you waste an encode.
并给出「数据相关时长应在 calculateMetadata 计算」。
图标用 spring 过冲 pop、数字用 ease-out 落定、标签只 fade——按层级分配运动强度。
skills/animated-infographic/SKILL.md
const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
「运动强度＝重要度」的映射。
2核心能力
01分层揭示编排（title→icon→number→label→connector 五层 tier 表）
02图标 spring 过冲 pop（低 damping 弹跳落定）
03key number count-up（ease-out cubic + round + Intl + tabular-nums）
04connector draw-on（按 path 长度做 strokeDashoffset 画入）
05构图节奏预算（标题 0.8–1.2s / 每项 1.2–2.0s / 连线 0.4–0.6s / 终帧 2–3s）
06层级→代码常量（icon 0 / counter ~6f / label ~12f 的偏移即层级）
07完整可运行 Remotion 场景 + 主时间表（0–264 帧逐事件）
08template × data 批量（同一构图渲染任意数据集）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | remotion（frame/spring/interpolate/Easing/Sequence） |
| cli | npm / npx（安装并运行 Remotion 工程） |
| package | zod（输出契约：Composition + schema + defaultProps） |
| cli | ffmpeg / ffprobe（仓库共享 contact-sheet.sh、probe-mp4.sh） |
| network | iart.ai（reference 尾部推广链接，具 utm 参数；仅读者点击才请求） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: skill 目录内无自带脚本；SKILL.md/reference 指示 agent 执行 `npm i`（装 Remotion 工程依赖）与 `np
- 网络端点: 声明外部网络访问: 执行期无业务端点调用，无数据抓取；统计数字由用户以 JSON 提供。
- 本地工作目录: 文件读写与工件输出: 在用户工程内写 `out/f-title.png`/`out/f-mid.png`/`out/f-end.png`、`out/infographic.
审计说明： 。触发项是分级范式「依赖第三方插件、镜像、远程包」：skill 目录本身是纯 Markdown（无脚本、无凭证读取、无 env 读取），但交付路径要求安装并执行远程包 remotion（+ @remotion/cli、react）与 zod 契约，经 npm/npx 获取；同仓 `remotion-video` 已按同口径判橙，此处与之一致。**明确不成立的项**：无凭证/环境变量读取；不向外部生成服务上传素材（图标、数字、配色全在本地代码与数据里）；无 TLS 降级、无 `--no-verify`、无沙箱关闭、无反自动化绕过。触发条件：仅在真的安装工程与渲染视频时发生。
5第二遍独立确认
- [discrepancy] 「pictogram 遮罩填充」这一声明是否有实现支撑 — SKILL.md 要求「用遮罩裁部分单位，而不是缩放它」，但 sequenced-infographic.md 只实现了 icon pop / counter / connector 三类，没有任何 pictogram 遮罩代码——该能力目前是要求而非可用实现。
- [ok] 「一次只动一个数字」是否有实现约束 — reference 的 STEP_STRIDE=48 帧（1.6s）> counter 的 30 帧（1.0s），计数器窗口天然不重叠；时间表明确写 Only one counter runs at a time。
- [ok] 时序常量与主时间表是否自洽 — TITLE_HOLD=30 / STEP_STRIDE=48 / CONNECTOR_OFFSET=30 与时间表（30 帧第 1 步、60 帧连线 1、78 帧第 2 步）逐项对得上；终帧 hold 90 帧＝3s，落在 SKILL.md 的 2–3s 区间内。
- [ok] 数据校验口径是否与 SKILL.md 一致 — reference 的「steps.length 3–5、value 有限、icon 白名单」与 SKILL.md 的 3–5 supporting data points 及其「超过五个元素级联就读成混乱」同口径。
- [ok] 数字格式化口径是否与 chart-animation 一致 — 两处都用 Intl.NumberFormat(en-US) + Math.round() + font-variant-numeric: tabular-nums；SKILL.md 明确说明与 chart-animation 共享该 craft。
- [ok] 跨 skill 分工声明是否可解析 — SKILL.md 指名 chart-animation；该 skill 与本文同仓（iart-ai/data-animation-skills）且存在（skills/chart-animation/SKILL.md），无跨仓库未知依赖。
6结论
适合： 需要「X in 3 steps / by the numbers」这类组合式信息图动画的讲解、市场、分析岗：一个中央洞见 + 3–5 个数据点、30–90s、要能定格成可截图的一帧。
不适合： 图表本身就是内容的场景（bar chart race、CSV 驱动的折线/面积图 → 用 chart-animation）；超过 5 个竞争元素或需要长旁白叙事的片子。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload animated-infographic.tar.gz
sha256:
Option B · Copy Guide for Agent534988a1cae145c0…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 8ce2709c39.