时序:重复、往返与停顿
缓动解决「一次迭代内,进度怎么走」;时序 (timing) 解决它上一层的问题:
把物理流逝的毫秒翻译成「第几次迭代、迭代内进度多少」。一段动画可以重复多次 (repeat)、
每次重复之间停顿一会儿 (repeatDelay),而重复的方向有三种语义:每次都从头顺放
(loop)、奇数次时间反演 (reverse)、奇数次运动形状镜像 (mirror)。
下面调参数,看进度曲线被重复成什么形状、小球如何往返。
进度随「总时间」的曲线 —— 一次迭代被重复 / 翻转成的完整形状
小球按当前进度移动:loop 总是从左冲到右再瞬回;reverse / mirror 则左右往返
end
迭代 —
进度 —
总时长 —
shapeProgress 翻转。reverse 是 ease(1−p) (先翻时间再缓动,
缓动曲线随之时间反演);mirror 是 1−ease(p) (先缓动再翻值,运动关于中点对称、
往返如一)。当缓动对称 (如 easeInOut) 时,两者形状相同——把缓动切到 easeOut 才看得出区别。
repeatDelay 落在两次迭代之间:进度走到 1 后并不立刻重置,而是停在末端等待这段停顿
走完,再开始下一次。把它调大,曲线顶部 (或往返的两端) 会出现一段水平平台。整段动画的总时长
delay + (repeat+1)·duration + repeat·repeatDelay 也随之变长。
@vega/anim — 重复与方向
相关:单次迭代内的曲线本身见缓动;把多个不同动画排到一条时间轴上 (而非同一段重复) 见关键帧与编排;让这条时序被一个可暂停 / 反向的游标 驱动见播放控制。