Lerp 的用法

lerp（线性插值）是游戏开发中最核心、最优雅的运动与过渡工具之一。它解决了“如何让一个值平滑地过渡到目标值”这一高频需求。在Cocos Creator中，它通常指 Vec3.lerp、Quat.slerp（球面插值）等方法。

📊 核心概念：什么是Lerp？

lerp 是 Linear intERPolation 的缩写。它的数学形式很简单：

结果 = 起始值 + (目标值 - 起始值) * 插值系数(t)

其中 t 是一个介于 0 到 1 之间的参数。

• 当 t = 0 时，结果 = 起始值。
• 当 t = 1 时，结果 = 目标值。
• 当 t = 0.5 时，结果 = 起始值和目标值的中间点。

简单说，lerp 就是根据一个比例（t），计算两点（或两个值）之间的某个点。

🎯 为什么要用Lerp？与直接赋值的天壤之别

这是理解其价值的关键。我们对比一下两种方式：

// ❌ 方式一：直接赋值（“瞬移”）
update(dt: number) {
    this.node.position = targetPosition; // 每一帧都直接设为目标位置
}
// 结果：物体瞬间“闪现”到目标点，没有移动过程。

// ✅ 方式二：使用Lerp（“平滑移动”）
update(dt: number) {
    // 计算当前帧的位置，平滑地向目标靠近
    Vec3.lerp(this.node.position, this.node.position, targetPosition, 0.1);
}
// 结果：物体平滑、渐进地移动到目标点，产生自然的动画。

Lerp的核心优势：

1. 平滑性：消除数值变化的突变，产生极其自然的过渡效果。
2. 可控的速度：通过调整 t 值，可以精确控制“趋近目标的速度”，实现“先快后慢”、“缓入缓出”等高级效果。
3. 帧率无关的平滑：结合 deltaTime，可以确保在任何帧率下，平滑过渡的物理时间是一致的。
4. 代码简洁：用一行代码替代复杂的匀速运动计算。

🚀 四大经典应用场景与代码实战

场景1：相机平滑跟随（最经典用例）

让相机像有“弹性”一样跟随玩家，而不是生硬地锁定。

import { _decorator, Component, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SmoothCameraFollow')
export class SmoothCameraFollow extends Component {
    @property(Node)
    target: Node = null; // 要跟随的目标（如玩家）
    @property
    followSpeed: number = 5.0; // 跟随平滑系数

    update(dt: number) {
        if (!this.target) return;
        // 获取相机和目标的世界坐标
        let cameraPos = this.node.worldPosition;
        let targetPos = this.target.worldPosition;

        // 【关键】计算插值系数，使其与帧时间相关，确保平滑度一致
        let t = 1.0 - Math.exp(-this.followSpeed * dt);
        
        // 使用lerp平滑更新相机位置
        Vec3.lerp(cameraPos, cameraPos, targetPos, t);
        this.node.setWorldPosition(cameraPos);
    }
}

原理：每一帧，相机都从当前位置向目标位置移动一小段距离（距离长短由 t 决定）。由于 t 小于1，它永远无法在一帧内到达终点，从而产生平滑的跟随延迟感。Math.exp 公式确保了无论帧率高低，相机的“响应时间”在现实时间中是恒定的。

场景2：UI元素缓动与数值渐变

用于血条变化、分数滚动、颜色过渡等。

// UI血条平滑减少
@ccclass(‘SmoothHealthBar‘)
export class SmoothHealthBar extends Component {
    @property(ProgressBar)
    healthBar: ProgressBar = null;
    private _currentHealth: number = 1.0;
    private _targetHealth: number = 1.0;

    // 当受到伤害时调用
    takeDamage(damage: number) {
        this._targetHealth -= damage;
    }

    update(dt: number) {
        // 使用数学lerp平滑当前值
        this._currentHealth = cc.misc.lerp(this._currentHealth, this._targetHealth, 0.15);
        this.healthBar.progress = this._currentHealth;
    }
}

// 颜色平滑过渡（从红到绿）
let startColor = new Color(255, 0, 0, 255);
let endColor = new Color(0, 255, 0, 255);
let currentColor = new Color();
// 每帧调用，t从0递增到1
Color.lerp(currentColor, startColor, endColor, t);
sprite.color = currentColor;

场景3：摇杆控制与角色移动

实现带惯性、手感润滑的角色移动，而非生硬的“开关式”移动。

update(dt: number) {
    // 获取摇杆输入（-1 到 1）
    let inputDir = new Vec3(this.getJoystickHorizontal(), this.getJoystickVertical(), 0);
    // 计算目标速度
    let targetVelocity = Vec3.multiplyScalar(new Vec3(), inputDir, this.maxSpeed);
    
    // 【关键】使用lerp平滑当前速度，产生加速/减速惯性
    Vec3.lerp(this._currentVelocity, this._currentVelocity, targetVelocity, this.acceleration * dt);
    
    // 应用速度
    let moveDelta = Vec3.multiplyScalar(new Vec3(), this._currentVelocity, dt);
    this.node.position = Vec3.add(new Vec3(), this.node.position, moveDelta);
}

场景4：物体间插值生成路径

在两点间生成一条平滑的路径点数组，用于飞行轨迹、绳子绘制等。

let startPoint = new Vec3(0, 0, 0);
let endPoint = new Vec3(100, 50, 0);
let pathPoints: Vec3[] = [];
let segmentCount = 10; // 路径段数

for (let i = 0; i <= segmentCount; i++) {
    let point = new Vec3();
    // 在起点和终点间均匀插值
    Vec3.lerp(point, startPoint, endPoint, i / segmentCount);
    pathPoints.push(point);
}
// 现在pathPoints包含了从起点到终点的11个平滑路径点

⚖️ 何时用Lerp？与Tween的对比选择

这是架构层面的重要决策。

简单决策指南：

• 如果动画是预设的、一次性的、不依赖每帧逻辑的 → 用 Tween。代码更声明式，更简洁。
• 如果动画是持续的、目标动态变化、需每帧与其他系统交互的 → 用 Lerp。控制力更强。

💡 高级技巧：实现“缓入缓出”

标准的匀速Lerp（t为常数）有时显得机械。通过动态调整 t，可以实现更自然的效果：

// 示例：实现一个“先快后慢”的缓动跟随，离目标越远移动越快，越近越慢。
update(dt: number) {
    let currentPos = this.node.position;
    let toTarget = Vec3.subtract(new Vec3(), targetPos, currentPos);
    let distance = Vec3.len(toTarget);
    
    // 动态计算t：距离越远，t越大，移动越快；距离越近，t越小，移动越慢。
    // clamp确保t在合理范围内，避免抖动
    let dynamicT = cc.misc.clamp01(distance * this.followSharpness * dt);
    
    Vec3.lerp(currentPos, currentPos, targetPos, dynamicT);
}

🚨 常见陷阱与注意事项

1. 忘记结合 deltaTime：在 update 中使用固定 t 值（如0.1），会导致帧率越高移动越快。务必使用与 dt 相关的系数（如 t = 1.0 - Math.exp(-speed * dt)）。
2. 接近终点时的抖动：由于浮点数精度，Lerp可能永远无法精确到达终点，在最后微小距离来回震荡。解决方案：设定一个最小距离阈值，当小于该阈值时直接 setPosition。
3. 性能：Vec3.lerp 会创建新的 Vec3 对象（如果未使用 out 参数）。在 update 中应重用临时变量，避免垃圾回收。

总结一下：lerp 是你实现平滑、自然、帧率无关的动态过渡的瑞士军刀。当你觉得物体的运动“太硬”、“太直接”时，就是该考虑使用 lerp 的时刻。掌握它将极大提升你游戏手感和视觉表现的质感。