动画引擎原理 总览待审核
sequence · timeline · 2D stagger

编排进阶:序列、依赖、二维交错

多段动画凑在一起,问题从「一段怎么动」变成「彼此何时动」。三种编排手法各有适用面: 序列把若干段首尾相接排在一条时间轴上,布局在排布时就一次算定;依赖不预先排布,而是用 每段的完成回调 (onComplete) 触发下一段,适合时长在运行时才确定的情形;二维交错给一组 网格元素同一段入场动画、各自一点递增的 delay,延迟来自该元素在某条空间轴上到发起点的距离。

序列 sequence:同一条时间轴上首尾相接

三段动画交给 timeline,at 省略时每段从上一段结束处起步 (A 完 → B 起 → C 起), 于是 A、B、C 依次推进。这与「三段同时播放」的区别在于:序列的总时长是三段之和,任意时刻只有一段在动。 下方泳道是引擎排定的 start / end 布局,红线为播放头;时间线本身是一个「值即全局时间」的主动画, play / 反向 / seek 全部免费继承。

A
B
C

编排布局 (引擎算出的 start / end) + 播放头

依赖 dependency:用完成回调触发下一段

序列要求各段时长提前已知才能排布;若下一段的参数或时长需等上一段跑完才确定,就改用事件式串接: 给每段一个 onComplete,在其中启动后继段。下面 A 跑完触发 B、B 跑完触发 C,每次衔接还可插入 一段 delay 作为停顿。状态条实时反映各段处于 等待 / 运行 / 完成 哪个阶段。

A等待
→
B等待
→
C等待
A
B
C

二维交错 2D stagger:延迟来自空间距离

一维 stagger 的 delay 取决于元素到发起点的索引距离。推广到网格,只需把「距离」换成二维量: 按行 (行号)、按列 (列号)、对角 (行+列)、从中心扩散 (到中心格的棋盘距离)。选不同策略,同一组方块就以不同 的波形入场。每个方块的 delay 仍由 stagger 按它在所选轴上的位置算出。

最大 delay — ms
序列与同时播放的区别:同时播放是把多段并排在轴的同一起点,总时长取最长一段,各段进度互不影响; 序列 (timeline 默认衔接) 是把各段首尾相接,总时长为各段之和,任意时刻只有一段在推进。两者 都由一个主时钟分发全局时间,差别只在每段的 start 落在哪里。 stagger 的 delay 从哪来:stagger(each,{from}) 返回 (index,total)→delay, delay 正比于该元素到发起点的距离除以最大距离 (再过可选 ease)。一维时距离是索引差;二维交错的做法 是先把网格每格映射到一条空间轴上的位置 (行号 / 列号 / 行+列 / 到中心的棋盘距离),再把这个位置当作 index 交给同一个 stagger。换轴即换波形,引擎本身不必改。
@vega/anim — stagger 算二维延迟 + onComplete 串接

  


  

    每段「跳一下 / 滑过去」的快慢由关键帧与编排里的基础 timeline / stagger 给出;
    整条编排如何被一个游标驱动、可暂停可反向见播放控制。