飞行中重定向:animateTo 不丢速度地改目标
引擎新增了原生弹簧值源:new Animation({ spring: { stiffness, damping, from, to, velocity } })——
值不再走 duration+缓动的固定曲线,而由物理弹簧实时产出,时长由 settleTime 反推。它最关键的能力是
animateTo(newTarget):在动画飞行途中改目标时,以当前显示值与当前速度为新初始条件重建弹簧——
速度连续,不会从静止「跳」着重启。这是固定曲线值源做不到的 (中断重定向页手搓的那套,
现在收成了一等 API),也正是 drag() 松手再抓的底层。
点轨道任意处设目标:谁能带着速度拐弯?
点任一条轨道,两个球同时把那一点设为新目标。趁球还在飞时连点不同位置:
橙球用 animateTo,带着当前速度平滑拐向新目标;
蓝球用 keyframe 重启 (cancel 旧的、从当前位置新起一条 easeOut),
每次都把速度清零、看得出「一顿」。
animateTo (原生弹簧值源 · 带速度接管)
keyframe 重启 (cancel + 新 easeOut · 速度清零)
橙球瞬时速度 0 px/s
蓝球重启时速度 0 px/s
连续点不同点最明显:橙球一路带速度拐弯,蓝球每次都先停一下再走。
Animation,读出打断时刻的 value 与 velocity,
以二者为新弹簧的 from / velocity 重建,朝新 to 演化——位置与速度都连续。固定曲线值源
(keyframe) 只能 cancel 旧动画再起一条,新曲线的起始速度由缓动决定 (easeOut 起点速度并不等于
打断时的真实速度),于是衔接处丢速度。手势释放时把拖拽落点与手势速度喂给
animateTo(target, { from, velocity }),就是 手势 / drag() 的惯性抛掷;
弹簧本身的形态见弹簧,概念铺垫见中断与重定向。
@vega/anim — 原生弹簧值源 + animateTo