线性插值（Lerp）算法

线性插值（Lerp）算法

当涉及到线性插值时，有几个关键概念需要理解：

线性插值的基本概念： 线性插值是一种用于在两个已知数值之间生成新数值的方法。在线性插值中，生成的新值是两个已知值的加权平均。插值的过程可以在一维、二维、三维或更高维度上进行。

单位向量： 单位向量是长度为1的向量，它指向特定方向。在二维空间中，单位向量通常表示为 (cos θ, sin θ)，其中 θ 是向量与x轴的夹角。

线性插值的公式： 在二维空间中，线性插值的公式通常表示为 Lerp(A, B, t)，其中 A 和 B 是两个已知点的坐标，t 是插值因子，表示在A和B之间选择的位置。插值因子 t 通常在 [0, 1] 的范围内。在二维空间中，如果 t 为0，结果为A点；如果 t 为1，结果为B点；如果 t 在0和1之间，结果则在A和B之间插值。

应用： 线性插值广泛用于计算机图形学、动画、游戏开发等领域。在这些领域中，它通常用于在两个关键帧之间平滑地插值动画的位置、颜色、旋转等属性，以产生流畅的动画效果。

遇到过的应用
在游戏中，在不使用代码库的情况下，让人物在两点之间线性运动
在如下代码中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let deltaX = this.targetX - this.x;
let deltaY = this.targetY - this.y;
let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

let directionX = deltaX / distance;
let directionY = deltaY / distance;

let frameDistance = this.speed;

if (distance < frameDistance) {
    this.x = this.targetX;
    this.y = this.targetY;
} else {
    this.x += directionX * frameDistance;
    this.y += directionY * frameDistance;
}

计算 deltaX 和 deltaY： 首先，计算出当前位置 (this.x, this.y) 到目标位置 (this.targetX, this.targetY) 的差值，得到 deltaX 和 deltaY。

计算 distance： 使用这两个差值，通过欧氏距离公式 distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY) 计算出两点之间的距离。

计算单位向量： 计算 directionX 和 directionY，它们是 deltaX 和 deltaY 除以 distance 得到的，这样它们就代表了从当前位置指向目标位置的单位向量。

计算每帧移动的距离： frameDistance 表示每一帧中角色移动的距离，它保持不变。

在每一帧中更新角色位置： 如果两点之间的距离小于每帧移动的距离 frameDistance，则直接将角色移动到目标点；否则，将当前位置沿着单位向量方向移动 frameDistance 的距离。这个移动距离的计算，即 directionX * frameDistance 和 directionY * frameDistance，就是线性插值的应用。这确保了在每一帧中，角色在X和Y轴上移动的距离都是平滑的，并且在两点之间做了插值，以保持移动的平滑性。

所以，可以看到 directionX * frameDistance 和 directionY * frameDistance 的部分就是线性插值的体现

• ← Newer Posts
• Older Posts →