最近在看Canvas的一些动画实例当中，时常看到lerp()这个函数，一直以来并不知道这个函数起什么作用，有什么特性。今天花了一些时间，Google了一下，才知道这个函数是线性插值。那么线性插值是个什么鬼？他在一些程序中又起啥作用？这就是这篇文章要探讨和学习的。

什么是线性插值

线性插值是数学、计算机图形学等领域广泛使用的一种简单插值方法。在平常实际运用当中，把插值称之为lerp。简单而言：

lerp是两点之间的线性插值的别称。

在深入了解之前，有几个小概念先介绍一下：

• 内插：内插是数学领域数值分析中的通过已知的离散数据求未知数据的过程或方法
• 拟合：根据若干离散的数据，得到一个连续的函数（也就是曲线）或者更加密集的离散方程与已知数据相吻合

也就是说：内插是曲线必须通过已知点的拟合。

在离散数据的基础上补差连续函数，使用这条连线曲线通过全部的离散数据点。插值是离线函数逼近的重要方法，利用它可通过函数在有限个点处的取值状况，估算出函数在其他点处的近似值。

时常看到的插值主要分为：线性插值、双线线性插值和三线性插值。虽然插值有多种类型，但我们今天要聊的也只是其中的一种，那就是最简单的插值——线性插值。

如何进行线性插值

假设我们已知A点的坐标(x0,y0)与B点的坐标(x1,y1)，要得到[x0, x1]区间内某一位置x在直线上的值，比如下图中的(x,y)：

根据图中所示，我们可以得到：

(y - y0) / (x - x0) = (y1 - y0) / (x1 - x0)

由于x值已知，所以可以从公式中得到y的值：

y = y0 + (x - x0) * (y1 - y0) / (x1 - x0) = y0 + ((x - xo) * y1 - (x - x0) * y0) / (x1 - x0)

同样的，根据上面的公式，已知y的值，可以求出x的值。

插值的运用

线性插值经常用于补充表格中的间隔部分。两值之间的线性插值基本运算在计算机图形学中的应用非常普遍，以至于在计算机图形学领域的行话中人们将它称之为lerp。所有当今计算机图形处理器的硬件中都集成了线性插值运算，并且经常用来组成更为复杂的运算。例如，可以通过三步线性插值完成一次双线性插值运算。由于这种运算成本较低，所以对于没有足够数量条目的光滑函数来说，它是实现精确快速查找表的一种非常好的方法。

我们在常用的骨骼动画、物体移动、灯光渐隐、摄像机动画和图形渲染中都会用到插值。接下来，我们看代码中怎么使用线性插值（前面也说了，我们这里只说线性插值）.

线性插值

假如我们需要将物体x通过n步，从A点移动到B点，可以使用下面的代码：

for (var i = 0; i < n; i++) {
    x = ((A * i) + (B * (n - i))) / n;
}

或者：

for (var i = 0; i < n; i++) {
    v = i / n;
    x = (A * v) + (B * (1 - v));
}

可以看到v的取值范围是0~1，插值中我们均可归一化至0 ~ 1范围内。

用n个离散学将0移动至1称为线性插值lerp。