← 全部概念
操作手感 / 11
缓动
将线性的运动进度变成曲线
交互演示
交互演示 · 移动指针或点击画面，观察变化
缓动函数把从 0 到 1 的线性进度映射到一条曲线上，使物体接近终点时逐渐减速，或先略微越过目标再回落稳定，而不是始终匀速移动。左侧图表绘出各条曲线，右侧方块则分别按照对应曲线，在同样的 1.5 秒内完成移动。任何起点、终点和时长已知的运动都可以使用缓动，例如菜单滑入或镜头平移。
适用场景
当运动的起点、目标和持续时间已知时，可以使用缓动。如果目标持续移动，或物体需要作出物理响应，则应改用基于速度的控制器。
实现示例
不依赖特定引擎的伪代码。请根据你使用的引擎调整函数和坐标约定。
t = clamp(elapsed / duration, 0, 1)
eased = 1 - pow(1 - t, 3)
position = start + (target - start) * eased常见错误
使用随时间推进的进度时，不要反复用当前位置替换起点，否则会改变运动曲线。有些缓动函数会有意越过目标值，因此不适合用于有严格上下限的数值。
内容原作 Nicolas Zullo · 中文整理与交互改编