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外部依赖
| 类型 | 依赖 |
|---|---|
| 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风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 声明的 pictogram 能力无实现 — pictogram 遮罩填充只有一句要求，reference 无代码，需 agent 自行实现，视觉正确性风险落在使用者身上。
- 远程包与本地代码执行 — npm i 安装 remotion/react/zod，npx 执行构建与渲染；Remotion 会 bundle 运行项目代码（框架固有属性）。
- 统计数据不做真伪审核 — value/label 原样上屏，skill 只验类型不验口径；错误数据照样会成为看起来「精确」的画面。
- 可能退化成一秒一个数字的机器感 — 纪律在文档里（ease-out、hold 0.5s、一次一个），若只抄时间常量而忽略 easing 说明，输出仍会显得机械。
- 商业引流位 — reference 尾部固定 iart.ai 推广段与 utm 链接。
风险提醒：橙色，评估后使用。触发项是分级范式「依赖第三方插件、镜像、远程包」：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 个竞争元素或需要长旁白叙事的片子。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 animated-infographic.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent534988a1cae145c0…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/data-animation-skills
原始 GitHubiart-ai/data-animation-skills ↗
Stars6
最近推送2026-06-22
本 skill commit
8ce2709c39许可MIT（仓库根 LICENSE：「MIT License」/「Copyright (c) 2026 iart.ai」；.claude-plugin/plugin.json 与 README「## License」同声明 MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。