两个物体同时出发、同时到达,为什么动起来如此不同?
一个物体匀速移动,另一个从静止轻缓起步,到达前再慢下来。两者用同样时间走同样距离,差别藏在中途怎样分配进度。三条简单曲线揭示这个选择,也带出不明显的代价:起步越轻缓,中段就必须有地方走得更快。
温柔的起步,要向中段借一点速度。
进度是函数,不只是帧数
让u在动画持续时间内从0走到1。进度函数把u映射为已经走过的距离比例。线性插值直接使用u,因此相同时间走相同距离。它容易预测,也方便与另一个匀速变化的量同步。
比较统一使用1个距离单位和1秒,明确保留单位。三条曲线都从位置0出发,在1结束,也都不超出终点。问题不是谁先到,而是在同一安排的旅程中,它们的位置、速度和加速度分别如何。
归一化时间也带来一个实用的实现区别:应以已经经过的时间除以预定时长来求进度,而不是每渲染一帧就增加固定量。如果某帧迟到了,下次采样仍可以对应原计划中的时刻。这样保留了时序关系,但跳过的中间位置可能表现为明显跳动。时钟正确,并不等于所有中间画面都真正显示过。

Smoothstep改变起步
三次smoothstep曲线为3u平方减2u立方。两端斜率为零,因此能与静止位置衔接,而不让速度瞬间跳变。它开始上升较慢,中途更快,最后又慢下来。
此例峰值速度为每秒1.5距离单位,线性则为1。任何在慢速部分多花时间、又要保持总距离和时长的路程,都必须在某些部分加快。看起来平滑,不一定代表峰值速度低。

五次曲线,再平滑一个边界
这里的最小跃度进度曲线为10u立方减15u四次方加6u五次方。两端速度与加速度都为零。峰值速度为每秒1.875单位,高于三次曲线,因为它给轻缓进出分配了更多时间。
跃度是加速度的变化率。在端点、时长固定且端点速度和加速度均为零的条件下,这个多项式让一维运动的跃度平方积分最小。名字来自这一精确数学性质,不表示所有界面动画都该使用它,也不表示全部人类动作都服从它。
最小加加速度并不表示处处没有加加速度。将五次曲线求三阶导数,归一化结果为 60 − 360u + 360u²。两端的值都是 60,而区间之外保持静止的物体,其加加速度为零。因此,位置、速度和加速度可以连续衔接,加加速度却仍发生跳变。这里最小化的是整段运动上的积分,并不承诺每个时刻的每阶导数都最小。

除了漂亮曲线,还要看导数
位置图都很规整,速度图却揭示峰值差异,加速度图则显示端点行为。线性运动在区间内加速度为零,但若接到静止状态,起止处速度必须突变。边界脉冲没有作为有限数值画在图中。
Smoothstep在两端的加速度为正6和负6距离单位每秒平方。若区间外物体静止,接点处加速度便发生跳变。五次曲线平滑接到零加速度,但更高阶导数仍有自己的边界行为。谈平滑,必须说明阶数和衔接条件。
时长改变运动需求
图是归一化例子,不是适合所有距离的固定配方。距离缩放为D、时长为T时,速度按D/T缩放,加速度按D/T²(即 D 除以 T 的平方)缩放。同一路径和曲线,时长减半,速度翻倍,加速度变为四倍。
物理运动控制中,这很重要,不能只凭好看的缓动形状判断是否满足限制。视觉上也一样:长时间看起来平静的曲线,压进短时间可能突然。帧率和显示响应还会增加限制,连续方程没有模拟它们。
把例子换成屏幕尺度:在 0.6 秒内移动 300 像素。连续曲线的峰值速度,线性为每秒 500 像素、smoothstep 为 750、最小加加速度为 937.5。后两者的最大加速度绝对值分别约为 5,000 和 4,811 像素每秒平方,顺序与峰值速度并不一致。这些数值描述的是指定曲线的要求,不是显示器测量,也不是实体执行机构的推荐参数。
让动作服务于表达
移动时间线,或想表现稳定过程时,匀速可能合适。轻缓落定能让物体显得到达后停住。超调、弹跳等风格需要别的规则,是否有用取决于场景,并不存在从机械到自然的通用排名。
计算提供选择的语言,但不是用户感知实验。看位置,知道物体在哪;看速度,知道移动多快;看加速度,知道速度怎样变。分清这些,缓动便成为有意分配运动,而不是只按名称选择装饰预设。
有限帧序列究竟采到了什么
以每秒恰好 60 个等间隔时刻,对这段 300 像素的运动采样。0.6 秒内有 36 个步进,连同两端共有 37 个位置。线性运动每步约前进 8.333 像素;smoothstep 的第一步只有 0.682 像素,最小加加速度曲线的第一步约为 0.062 像素。小数位置在计算里有明确意义,但具体渲染器可能以不同方式表示或取整。
中间阶段补回了起步时落下的距离。smoothstep 的最大采样步长约为 12.487 像素,最小加加速度曲线约为 15.593 像素。这些有限差分表示一段时间内的位移,而不是某个精确时刻的连续速度。新图画出全部 36 个步长,使温和的两端与代价更高的中段可以一并检查。只数总帧数会漏掉运动的重要特征。
经过 100 毫秒,三条曲线按同样顺序分别移动了 50.000、22.222 和 10.648 像素。因此,即使到达时间不变,十分柔和的起步也可能让可见进展来得更晚。如果控件需要迅速回应操作,应同时考虑初段轨迹与收尾,而不只看最后是否柔和停下。实体运动还须分别核对速度、加速度、加加速度及实际机构。本计算揭示取舍,不把任何曲线一概视为更灵敏或更舒适。

