动画引擎原理 总览待审核
time remap · slow-mo · speed ramp

时间重映射:局部慢放与速度曲线

播放头沿一条线性时间轴均匀推进。时间重映射 (time remap) 不碰这条轴,而是在它之上再套一个 时间 → 时间的映射 u' = remap(u):某个子区间被拉伸,对应的运动就慢放 (slow-mo); 整段先快后慢就是速度曲线 (speed ramp)。下面 蓝球跟随原始线性播放头 u, 橙球跟随重映射后的 remap(u)—— 两者同时出发、同时到达,差别只在某段橙球明显放慢。

重映射曲线 remap:输入时间 u → 输出时间 u′ (橙),对角虚线为不重映射的 linear 参考

速度曲线 = remap 的斜率:慢放区斜率 < 1,其余补偿性 > 1

蓝球:原始线性播放头 u (匀速)

end

橙球:重映射后的播放头 remap(u) (某段慢放)

end
u 0.00 remap(u) 0.00 局部速度 1.00×
重映射后两端仍是 remap(0)=0remap(1)=1:总时长不变,只是把时间重新分配。 慢放区放慢了播放头,这部分「省下来的」时间必须在区间外补回去,所以区间两侧的局部速度会大于 1。 倍率越低、慢放区越宽,补偿段就越快。这与缓动同源:缓动是把时间重塑成值进度 (时间 → 进度),这里是把时间重塑成时间 (时间 → 时间)——同一种「对播放头再套一层映射」的思路。
@vega/anim — 线性 Animation 取 u,再 remap 到重映射时间后采样

  

驱动这一切的仍只是一个可暂停 / 可任意 scrub 的线性播放头,详见播放控制; 把这里的「时间 → 时间」换成「时间 → 值进度」就是缓动:两者都是对均匀时间轴的重塑形。