Phaser中如何实现相机指定offsetX的平滑滚动动画？

首先修正你代码里的一个问题：每次点击都新建相机会导致场景中存在多个相机实例，造成资源浪费和渲染冲突。应该复用已有的相机（比如主相机），或者只创建一次自定义相机。

下面提供两种实现相机平滑移动的方法：

方法1：使用相机内置pan方法 #

Phaser的相机对象自带pan方法，直接支持平滑移动到目标位置，用法简单：

/* START-USER-CODE */
awake() {
    // 复用主相机，或创建一次自定义相机
    let horizontalCamera = this.scene.cameras.main;
    // 如果需要自定义相机，取消下面注释并注释上面一行
    // if (!this.scene.cameras.getByName('horizontalCam')) {
    //     horizontalCamera = this.scene.cameras.add(0, 0, 800, 600).setName('horizontalCam');
    // } else {
    //     horizontalCamera = this.scene.cameras.getByName('horizontalCam');
    // }

    this.gameObject.setInteractive().on("pointerdown", () => {
        // pan(目标X, 目标Y, 动画时长(ms), 缓动函数)
        horizontalCamera.pan(800, 0, 1000, 'Power2');
    });
}
/* END-USER-CODE */

参数说明：

• 800, 0：相机最终滚动到的目标位置
• 1000：动画时长，单位毫秒（1秒）
• 'Power2'：缓动函数，可选，默认是线性动画，常用的还有Quad.easeInOut、Bounce.easeOut等

方法2：使用Tweens系统实现更灵活的动画 #

如果需要更精细的控制（比如动画回调、重复播放等），可以用Phaser的Tweens系统来动画相机的scrollX属性：

/* START-USER-CODE */
awake() {
    const mainCamera = this.scene.cameras.main;

    this.gameObject.setInteractive().on("pointerdown", () => {
        this.scene.tweens.add({
            targets: mainCamera,
            scrollX: 800, // 目标滚动X值
            duration: 1200, // 动画时长
            ease: 'Quad.easeInOut', // 缓动效果
            onComplete: () => {
                // 动画完成后的自定义逻辑（可选）
                console.log('相机已平滑移动到目标位置');
            }
        });
    });
}
/* END-USER-CODE */

关键注意点 #

• 优先复用主相机（this.scene.cameras.main），除非你确实需要多相机场景
• 调整duration可以控制动画快慢，数值越大移动越平缓
• 缓动函数可以让动画更自然，Phaser内置了多种缓动效果，可根据需求选择

内容的提问来源于stack exchange，提问作者Rha Onthemoon