跳转到使用指南
Chart Animation作者 iart-ai

Chart Animation Skill.

用准确数值和帧驱动的运动渲染数据图表。

  • 数据动画
  • 图表
源文件解读 · chart-animationSKILL.md
任务 用准确数值和帧驱动的运动渲染数据图表。 产出 帧驱动的 Remotion 图表合成。 开始前的准备 源文件工作流依赖 Remotion 及所选图表或比例尺库。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

用准确数值和帧驱动的运动渲染数据图表

制作帧驱动的图表视频,包含易读数值、排名转场,并在 Remotion 导出前检查数据集。

基于来源的工作流并非执行基准测试

工作方法

chart-animation 构建数字和几何形状都由当前视频帧决定的动态图表。它将数据到像素的比例映射,与帧到变化数值的插值分开处理。当图表库自身的计时器与离线渲染器不一致时,这种区分尤其重要。

文档中的工作流使用 Remotion 渲染输出,并将数据集保存在输入 props 中,涵盖增长的柱状图、数值计数器、折线展开和排名序列。在编码视频或将设计复用于多个数据集之前,先通过渲染静帧核对标签、单位和最终值。

预期交付物

  • 帧驱动的 Remotion 图表合成。
  • MP4 及可复用的数据集和主题输入。
  • 用于检查标签、排名和数值的代表性静帧。
查看示例简报

从简报到审查

  1. 01
    验证数据映射

    明确时间字段、数据系列、单位和值域。使用输入 schema 和默认 props 注册 Remotion 合成,并保持数据集与主题分离。行数决定视频长度时,通过 calculateMetadata 推导时长,避免更换数据集后仍沿用上一段视频的长度。

  2. 02
    用帧驱动变化

    通过帧时钟计算数值和位置。关闭与之竞争的图表库动画循环,并在取整后格式化显示值。

  3. 03
    编码前先检查

    使用实际交付的 props 渲染开头、中间和结尾静帧。在渲染完整 MP4 前,检查准确数值、排名变化、标签和比例尺。

02 适用场景

适合什么场景

源文件工作流依赖 Remotion 及所选图表或比例尺库。

适合的场景

  • 视频中的数据必须准确适合数字错误或列映射错误会改变信息含义的图表。
  • 同一图表设计用于多个数据集经过验证的 props 和共用主题设置,支持从同一源项目反复渲染。

需要检查的限制

  • 需要渲染环境源文件工作流依赖 Remotion 及所选图表或比例尺库。
  • 动画不能证明叙事成立需要提供并检查数据集及其解读;柱形运动流畅不代表指标具有意义。

请提供这些输入

  • 结构化记录提供 CSV 或 JSON,并明确系列标识和时间字段。
  • 指标定义指定单位、取整方式、标签,以及值得停留强调的事件。
  • 视频目标说明时长、画幅比例、帧率和预期观看尺寸。

03 关键决策

影响结果的关键选择

  1. 确定性的数值

    跳转到同一帧会得到相同显示数据,而不是依赖计时器的状态。

  2. 易读的数值计数器

    格式化和等宽数字能让不断变化的数值在屏幕上保持稳定。

  3. 有代表性的批量检查

    真实数据集能在问题扩散到多个文件前暴露映射或布局缺陷。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

查看源文件和环境要求

提供 CSV 或 JSON,并明确系列标识和时间字段。

上游源文件
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md

下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求;这不是安装命令。

先完成一项明确的交付物

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
使用 chart-animation,根据我的月度销售 CSV 制作一支 15 秒的排名视频。准确保留提供的五个产品名称和营收数值,并显示货币单位。开头短暂停留,随后展示排名变化,在首次榜首更替时暂停强调,结尾保留足够的阅读时间。使用视频帧驱动数值和位置,保持系列标识稳定,并使用等宽数字。编码前,使用根据实际 CSV 生成的 props 渲染代表性静帧。交付 MP4、可复用合成,以及说明所用数据列的备注。

检查结果

根据以下可观察标准检查实际输出。

  • 将渲染后的标签、单位和最终数值与提供的记录逐一核对。
  • 检查插值后的排名运动,以及是否有标签超出画布。
  • 确认实际输入 props、最终时长和解码后的视频。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
iart-ai
技能文件
SKILL.md
许可证
MIT
已审查的快照
2026-11-02 · 8ce2709c3992
编辑来源摘要
用准确数值和帧驱动的运动渲染数据图表。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

可以使用 D3 吗?

源文件使用 D3 处理比例尺和形状,但时间仍由视频渲染器管理。D3 transitions 或其他独立动画时钟不应驱动导出的帧。

为什么先检查静帧再看视频?

静帧更容易暴露错误数值、颠倒的数据列和被裁切的标签。源文件要求使用实际交付的数据集检查。

可以渲染多个 CSV 文件吗?

文档中的模式是将每个数据集作为 props 传给同一个合成。先验证代表性数据集,再扩展到整批。

OpenDesign

让需求和设计工作保存在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/iart-ai/data-animation-skills/blob/8ce2709c3992490251e8a991535b1945f01c6865/skills/chart-animation/SKILL.md