中断与重定向:带速度接管
真实交互里,一段动画几乎总是还没播完就被新目标打断:列表滚到一半又被甩一下、卡片归位途中又被拖走。 幼稚的做法是丢弃旧动画、从当前位置重新开始一段——位置虽连续,速度却被清零,画面上是一个生硬的 顿挫。正确的做法是读出打断时刻的当前速度,让新的弹簧带着这个初速度继续演化 (velocity handoff), 运动便首尾如一地顺滑。点轨道任意处改目标,或按「随机目标」,对照两种策略下速度曲线是否跳变。
点轨道任意处设新目标 (▿ 为当前目标);中途再点,就是一次中断
▿
位置 与 速度 随时间 (红虚线=中断时刻)。 看中断处速度曲线是平滑过渡还是竖直跳到 0
位置 —
速度 —/s
模式 —
duration + easing 的曲线把「初速度」写死成
起点切线斜率,无法在中途接一个任意速度。弹簧是解析解,
createSpring 的 velocity 参数就是初速度;打断时用 spring.velocity(t)
读出当前速度,作为新弹簧的初速度即可。位置永远连续 (都从当前点出发),差别只在速度连不连续——
这正是「顺滑的重定向」与「生硬的重新开始」的分界。
@vega/anim — 打断时读速度、交给新弹簧
这里的初速度来自上一段动画;若来自输入设备 (拖拽松手的甩动速度),就是 高级交互的拖拽惯性。弹簧接住速度的物理本身见 弹簧。