需要制作带图标、关键数字和连接线的动态信息图时…

用 Remotion 制作由图标、关键数字、短文本和简单形状组成、按视觉层级依次揭示的动态信息图。

适用场景

解决思路

1. 先设计静态画面：在添加任何关键帧之前，把全部图标、数字、标签摆到最终位置并平衡构图；动画只控制每个已定位元素何时出现，绝不决定布局。
2. 严格控制范围：一个核心观点、3–5 个支撑数据点、时长 30–90 秒；超过五个竞争元素，级联就会显得混乱。
3. 按视觉层级决定揭示顺序（顺序即层级，眼睛跟随出现顺序，而非布局顺序）：第 1 层标题/核心观点最先单独出现（淡入+轻微上移）；第 2 层图标按条目领衔其分组（弹跳/缩放过冲）；第 3 层关键数字紧随图标（缓出计数）；第 4 层标签/说明在数字下方落定（淡入，无夸张动作）；第 5 层连接线/流程线在条目完成时连接（按路径长度绘制）。
4. 静态层级用大小、字重和颜色；动画层用时机和运动；同一时间只让一个元素“大声”，绝不同时计数两个数字。
5. 用固定延迟（stagger）依次揭示同级元素，让整组读起来是序列而非一闪而过；每个元素都由当前帧纯函数驱动，绝不用挂钟时间或库的动画循环，保证渲染确定性。
6. 在 Remotion 中用 useCurrentFrame 实现错峰：STAGGER = 8 帧（约 0.27 秒 @30fps），每个条目的本地时钟为 frame - index * STAGGER，用 spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } }) 得到 enter，再设置 opacity 和 translateY((1 - enter) * 24)px。
7. 错峰取 6–10 帧最干脆，超过约 15 帧就拖沓；所有同级元素共用同一条进入曲线，让级联读起来是自信而非杂乱。
8. 图标动画用“弹跳”：用低阻尼弹簧产生缩放过冲后落定，例如 spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } })，绝不用线性缩放（显得机械）；用 transformOrigin: "center" 缩放。
9. 象形图填充（如“10 人中的 7 人”）按同样错峰逐个揭示单位，部分单位用遮罩裁剪，而不是缩放。
10. 关键数字用计数器：先插值底层数字并缓动，再在渲染时格式化；必须四舍五入后再格式化，并用 tabular-nums 防止数字变化时布局抖动。
11. 计数器实现：interpolate(frame - delay, [0, 30], [0, 1287], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) })，再用 new Intl.NumberFormat("en-US").format(Math.round(raw)) 格式化；CSS 设置 font-variant-numeric: tabular-nums; line-height: 1。
12. 标题数字用缓出读起来像“落定”，线性则像机械里程表；每个数字保持约 0.5 秒再开始下一个条目。
13. 连接线把卡片网格变成流程：用 strokeDasharray 和 strokeDashoffset 按路径长度绘制线条/箭头，使其恰好在指向的条目完成时落定，用运动表达“接下来看这里”。
14. 连接线绘制实现：取 pathRef.current.getTotalLength() 得到 len，draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" })，设置 strokeDasharray={len}、strokeDashoffset={len * (1 - draw)}。
15. 连接线画在两个被连接条目之间：在源条目出现之后、目标条目出现之前的间隙中绘制，让线条引导视线进入下一次揭示。
16. 按元素而非按秒数分配时间预算：标题停留 0.8–1.2 秒；每个条目（图标弹跳→计数→标签）1.2–2.0 秒；连接线绘制 0.4–0.6 秒并与下一条目重叠；最终完整构图停留 2–3 秒。
17. 结尾停在完整静态信息图并静止保持 2–3 秒——要点是组装完成的画面，让它落定，不要有运动竞争。
18. 交付前按清单自检：静态布局先于关键帧设计且最终帧看起来有意为之；一个核心观点、3–5 个数据点、30–90 秒；揭示顺序遵循层级而非布局顺序；同级元素以一致的 6–10 帧错峰和同一条进入曲线级联；图标弹簧过冲弹跳、数字缓出计数并带 tabular-nums、同一时间只有一个数字在动；连接线绘制引导视线；每个值都是 useCurrentFrame() 的纯函数、无库计时器；最终构图保持 ≥2 秒。
19. 用渲染静帧→检查→编码的验证循环：先用 npx remotion still Infographic out/f-title.png --frame=20 --props='{"items":[...]}' 渲染标题+首次弹跳帧，--frame=90 渲染级联中段，--frame=149（durationInFrames - 1）渲染最终构图保持帧。
20. 逐张检查 PNG 的保真度（每个关键数字精确、标签/说明正确、图标字形正确）和瑕疵（文字溢出、图标出画布、安全区被裁、字体缺失、连接线指向错误条目、本应落定的层级仍半揭示）。
21. 静帧检查通过后再编码：npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'；用 npx remotion compositions 读取 durationInFrames/fps；最终构图保持帧是“关键帧”，要确认它看起来有意为之而非级联中段。
22. 数据驱动/批量时：先用静帧验证一组代表性 props（统计值+标签），再批量渲染所有变体，把计数器或布局 bug 一次性抓住而不是重复 N 次。
23. 免费获得 README 演示 GIF：npx remotion render Infographic out/demo.gif --codec=gif。
24. 完成前确认：npx remotion still 在标题、级联中段、最终保持帧均渲染干净、无错误、无缺失字体/图标；每个关键数字精确（四舍五入、tabular-nums）且每帧元素都在安全区内；仅帧驱动，无 Date.now()/Math.random()/库计时器（CI 中保持确定性）；实际交付的 props 渲染正确（不只是 defaultProps）——统计值、图标、标签都对；完整 MP4 已编码且可播放，可选渲染 GIF 用于 README。
25. 时长依赖数据（N 个条目 × 每条目预算）时，在 calculateMetadata 中计算，不要手工写死。
26. 可参考 references/sequenced-infographic.md：一个完整可运行的 Remotion 场景（3 步“工作原理”信息图，含错峰图标弹跳、缓动计数统计、绘制式连接线、主时间映射表，以及模板×数据的可数据驱动 props 模式），并含不依赖 Remotion 的内联 SVG 变体。

适用边界 · 注意事项

• 内容本身就是图表时（如条形图竞赛、动画折线/面积图、由 CSV 驱动的图形）应使用 chart-animation 技能，而不是本技能；可以把该图表作为一个区块嵌入信息图中。
• 需要超过 5 个竞争元素或超过 90 秒的复杂叙事时，级联会读作混乱，不适合本技能。
• 非 Remotion 环境可参考内联 SVG 变体，但本技能的核心错峰/弹簧/计数器实现依赖 Remotion 的帧驱动模型。