弹簧:没有时长的动画

缓动是「预先规定好 N 毫秒走完一条固定曲线」。弹簧不一样——它是一个物理系统:由刚度 stiffness、阻尼 damping、质量 mass 和初速度决定,自己演化到静止。它没有内建时长,时长是参数的结果 (引擎反推得到 settleTime);也因此能自然「接住」一个进行中的速度。数学上它是阻尼谐振子 x'' + (c/m)x' + (k/m)x = 0 的解析解,按阻尼比 ζ 分三种形态。

位移随时间 (橙=弹簧曲线,灰线=目标值 1;起点落在 0 线、目标落在 1 线)

阻尼比 ζ — 形态 — settleTime — ω₀ —

点「弹一下」:弹簧 vs 同时长 easeOut

三种形态:阻尼比 ζ = damping ÷ 2√(stiffness·mass)。ζ < 1 欠阻尼——振荡着收敛,会过冲超过目标 (弹性感来源);ζ = 1 临界阻尼——最快地不振荡归位;ζ > 1 过阻尼——两个实指数衰减,缓慢爬向目标。把 damping 从小调大,看曲线从「来回抖」过渡到「一次到位」再到「迟缓」。

@vega/anim — 弹簧的解析解,以及化成可用的 easing

弹簧把「接住初速度」做成了一等能力:把上面的 v₀ 调大再弹,上排小球 (弹簧直接驱动) 会顺着初速度冲过目标再回弹,下排同时长 easeOut 则只能从静止出发、看不出初速度——这正是手势拖拽松手后惯性的来源,也是为何固定曲线无法承接进行中的运动 (对照缓动)。注意把弹簧化成 springEasing 时初速度会被归零 (一条可复用的 0→1 曲线无法携带一次性的发射速度);真正的中途速度接管见中断与重定向。