向量弹簧:二维联动与链式跟随
标量弹簧只解一个维度上的位移。要让一个点在平面上平滑跟随光标,把它推广成向量弹簧:
用两个 createSpring 分别管 x、y 两个分量。关键在于两个分量共享同一组参数
(相同的 stiffness / damping / mass),因而步调一致——这才是「一个二维弹簧」,
而不是 x、y 各跑一条互不相干的动画。在此之上做链式跟随 trailing:一串节点,每个节点用自己的弹簧追逐
前一个节点的当前位置,移动光标时形成拖尾波浪。
在框内移动 / 拖动指针;头节点 (橙) 用向量弹簧追光标,后续节点逐个追前一个,尾端 (亮橙) 滞后最久
move / drag here
头节点到光标距离 —
尾节点滞后 —
节点数 —
createSpring 解析求解。两条弹簧用相同的 stiffness / damping / mass,
所以在两个轴上的收敛节奏一致,合成出的轨迹才是协调的曲线;若给 x、y 不同参数,运动会在两个方向上脱节、看起来歪斜。
trailing = 每个节点的目标 to = 前一个节点的当前位置。头节点的目标是光标,第 k 个节点的目标是第 k−1 个节点
此刻的位置。每帧先用最新光标 setTarget 头节点,再从头到尾依次把前一节点的当前坐标作为后一节点的新目标,
弹簧的滞后逐级累积,就得到果冻链般的拖尾波浪。
@vega/anim — 向量弹簧 (双轴共享参数) 与链式跟随
单轴弹簧的物理形态 (欠阻尼过冲、临界、过阻尼) 见弹簧:没有时长的动画;
这里的「每帧 setTarget 到最新光标」与弹簧接住进行中速度的能力,是中断重定向
的连续版本;把指针换成真实手势的抛掷与跟手,见手势。