chart.rank-race

真实输入动态排名

Multi-period Rank Race

仅本次打开有效

Live preview

真实渲染预览

查看引用 ↓

Purpose

这个动效用来做什么

多组数值跨时期连续变化，条形随排名交换位置，并稳定呈现并列和零值。

Multi-period Rank Race with deterministic, replaceable local inputs.

范围: 镜头
复杂度: 高级
建议时长: 6s
画幅: 16:9 · 9:16

图表数字

对比解释

数据叙事新闻解读知识视频

Inputs

可替换参数

settings必填 · object

完整结构化输入；使用同目录 remotion/default.json 与 schemas.ts 校验。素材路径相对于 public/，本例素材位于 public/p2/。

展开完整输入示例（JSON）

{
  "title": "谁在改变排名？",
  "unit": "万次",
  "source": "模拟数据",
  "periods": [
    "2023",
    "2024",
    "2025",
    "2026"
  ],
  "series": [
    {
      "name": "灵感笔记",
      "color": "#356447",
      "values": [
        87,
        105,
        131,
        163
      ]
    },
    {
      "name": "创作工具",
      "color": "#d28e53",
      "values": [
        62,
        109,
        168,
        210
      ]
    },
    {
      "name": "生活记录",
      "color": "#87a873",
      "values": [
        119,
        130,
        142,
        155
      ]
    },
    {
      "name": "设计观察",
      "color": "#618684",
      "values": [
        43,
        74,
        125,
        185
      ]
    }
  ]
}

Motion timeline

归一化动作时间线

所有事件都使用 0 到 1 的归一化进度：0 是镜头开始，1 是镜头结束；事件可以重叠，适配器再把相同比例映射到秒或帧。

chart.enteropacity.fade

0.03–0.15

chart.rankchart.rank-series

0.16–0.76

chart.holdstate.hold

0.85–1.00

Copy to Agent

复制执行上下文

预览与引用使用同一个引擎选择。上下文保留共享机器标记与对应 Adapter 路由。

正在加载当前 Recipe 的上下文…

Engine implementations

引擎实现

frame-based

Remotion

已验证

Composition: RankRace
入口文件: RankRace.tsx
确定性: 是

typecheck通过
build通过
render通过

Source, reference & rights

来源与使用边界

再分发状态: original
来源说明: Original ghost six-sample implementation and programmatically authored local fixtures; dependency licenses remain separate.
Recipe 文件: recipes/chart/rank-race/recipe.yaml

参考

无外部参考；该 Recipe 与测试素材为项目原创。

Verification

验收标准

real-input

Default and two materially different input sets render successfully; inputs are validated before rendering.

distinct-motion

多期数据驱动实时排序及位置交换；不是单期静态排序、仅从零生长的柱状图或两组固定位置比较。

first-three-seconds

The central subject and meaningful action are visible within three seconds; the full six-second shot retains a readable hold.

bounded-layout

Both verified orientations keep primary content readable without unintended clipping.

1 个实现已通过真实渲染理解验证模型