瀑布图揭示
Waterfall Reveal
真实渲染预览
这个动效用来做什么
起始值经过正负变化逐段累积,连接线传递路径并在终点强调最终总值。
A starting value accumulates through positive and negative changes while connectors carry the path to a focused final total.
- 范围
- 效果
- 复杂度
- 进阶
- 建议时长
- 3.6s
- 画幅
- 16:9 · 9:16 · 1:1
可替换参数
start_value必填 · numberStarting total before the change sequence.
- 默认值
120
changes必填 · number-listOrdered positive or negative changes applied to the running total.
- 默认值
[24,-12,36,-18,28]
label必填 · stringChart headline.
- 默认值
Conversion path
归一化动作时间线
所有事件都使用 0 到 1 的归一化进度:0 是镜头开始,1 是镜头结束;事件可以重叠,适配器再把相同比例映射到秒或帧。
0.06–0.240.14–0.680.14–0.680.24–0.720.64–0.820.84–1.00复制执行上下文
预览与引用使用同一个引擎选择。上下文保留共享机器标记与对应 Adapter 路由。
正在加载当前 Recipe 的上下文…
引擎实现
HyperFrames
- Composition
waterfall-reveal- 入口文件
index.html- 确定性
- 是
- lint通过
- validate通过
- inspect通过
- render通过
Remotion
- Composition
WaterfallReveal- 入口文件
WaterfallReveal.tsx- 确定性
- 是
- typecheck通过
- build通过
- render通过
来源与使用边界
- 再分发状态
- original
- 来源说明
- Self-authored G6 waterfall data-story design.
- Recipe 文件
recipes/chart/waterfall-reveal/recipe.yaml
参考
无外部参考;该 Recipe 与测试素材为项目原创。
验收标准
cumulative-stepsEach change bar begins at the previous cumulative level and the final total equals the start value plus all changes.
signed-directionPositive changes extend upward and negative changes extend downward from their cumulative anchor.
running-connectorsHorizontal connectors link adjacent cumulative levels without covering bar labels.
terminal-totalThe final cumulative value receives a distinct readable emphasis after the change sequence is visible.
stable-holdBars, connectors, labels, and final total remain still and readable during the final hold.