Lerp的应用-利用简单线性插值来平滑动画效果

Lerp的应用-利用简单线性插值来平滑动画效果

上一篇的 RxJS的动画简介 里提到一个动画平滑的小技巧, 这里展示几个例子，它真的很简单却很有用。

Lerp是两点之间的线性插值的别称。这是一个实现起来相当简单的效果，但可以真正改善你的动画的外观，如果你将一个对象从点A移动到点B.

它是如何工作的？

如果您有一个对象的当前位置和目标的位置，您可以线性内插这些点之间的距离的百分比，并在每个动画帧上更新该位置。

function lerp(position, targetPosition) {
// 计算当前位置与目标位置差值的 20%
  position.x += (targetPosition.x - position.x)*0.2;
  position.y += (targetPosition.y - position.y)*0.2;
}

通过这样做，对象移动的量随着位置和目标之间的距离减小而变小。这意味着对象将越来越接近它的目标，速度将减慢，这创造一个很好的缓和效果。

一些例子

这里有一个球跟随用户的鼠标或触摸运动的例子。如果我们使球移动到鼠标移动的地方，球的移动可以非常快但看起来有点脱节。如果我们快速移动鼠标，我们也可以看到单独的“球影”。

这里是同样的演示，除了这次我们使用lerp。不是将球立即向右移动到鼠标位置，我们每次将它移动10％的距离。

注意球的运动很平滑，整体更令人愉快的效果。

这里是使用lerp的另一个例子。这次我们有一个滚动指示器，当您向下滚动“页面”时更新。

所以，lerp“把戏”是一个伟大的工具，我们的网络动画套路，以对抗线性或锯齿状的运动。