动画引擎原理 总览待审核
decay · friction · 动量滚动

惯性衰减:没有目标的滑行

弹簧 (spring) 有一个明确的目标值 to,系统被它吸引、欠阻尼时还会回弹。 惯性衰减 (decay) 恰恰相反——它没有目标,只有一个初速度摩擦。给定 velocity, 物体顺着方向滑行、速度按指数衰减,自己减速到停,落在哪里完全由初速度决定。这正是松手后的动量滚动 (flick-to-scroll)、惯性列表、地图甩动的底层模型。下面拖动滑块设定初速度,点「甩出」看小球滑行并停下。

位置 x(t):从 from 趋近落点 (灰线=理论落点 target)

速度 v(t) = v₀·e−t/τ:指数衰减到 0

滑行轨道 (小球从中点起,正速度向右 / 负速度向左;橙竖线=理论落点,开吸附后对齐到最近刻度)

理论落点 target 滑行距离 settleTime 当前位置
decay vs spring 的本质:两者都没有内建时长,但弹簧给定 to、靠回复力收敛到目标; decay 没有 to,靠摩擦把初速度耗尽。落点是初速度的结果而非输入: amplitude = power · v₀target = from + amplitude,所以甩得越快滑得越远。 速度按 v(t) = v₀·e−t/τ 衰减,τ (timeConstant) 是速度降到 1/e 的时间,越大滑得越久。 settleTime 由「与落点之差小于 restDelta」反解得到 τ·ln(|amplitude|/restDelta)
@vega/anim — createDecay + rAF 驱动动量滚动

  

把 decay 与弹簧拼接,就得到「带惯性的吸附」:打开上面的开关,理论落点会被 modifyTarget 对齐到最近的刻度, 既保留甩动的初速度手感,又精确落定——轮播 / 滚动选择器正是这么做的。decay 最常见的入口是手势:松手时把 指针的瞬时速度交给它,见 手势速度拖拽与惯性; 要对照「有目标、会回弹」的物理系统,见 弹簧