关键帧与编排:途经点、时间轴、交错
把「一对 from→to」推广,就得到编排动画的三件要素:关键帧把动画串过一串途经值,每个值还能指定 出现的进度位置 (offset);时间线把多段独立动画按各自起点排在同一条轴上;交错给一组元素 同一段动画、各自一点递增的延迟,于是有了波浪式的先后感。
关键帧 + offset
下面的球依次经过 0 → 0.9 → 0.3 → 1 四个位置,出现在进度 0 / 0.2 / 0.8 / 1 处
(注意 0.2→0.8 这段占了 60% 的时间却只是停顿般缓行)。右侧曲线是「值随进度」的折线。
交错 stagger
同一段「跳一下」动画,按 from 指定的发起点给每个方块递增延迟。
时间线 timeline
三段动画排在一条轴上:B 在 A 结束后晚 100ms 起 (+=100),C 与 B 同时起 (<)。
下方泳道是引擎算出的布局,红线是播放头。时间线本身就是一个「值即全局时间」的动画,
play / 反向 / seek 全部免费继承。
A
B
C
编排布局 (引擎算出的 start/end) + 播放头
times (offset) 把「经过哪些值」与「在哪个进度经过」解耦,于是
同一串途经值能压缩 / 拉伸节奏 (上面 0.2→0.8 占了 60% 的时间却只是缓行);交错是同一段动画 + 递增 delay,
把先后感交给一个 (index,total)→delay 函数;时间线本身则是一个「值即全局时间」的动画——子动画各自的
start 落在这条轴上,于是 play / seek / 反向对整条编排都免费继承。更进阶的序列、依赖与二维交错见
编排进阶。
@vega/anim — 关键帧 · 交错 · 时间线