本文详解如何在 Phaser 3 中精准控制动画序列：让起始动画（如“起步”）仅播放一次，随后无缝衔接并循环播放主动画（如“行走”），避免 anims.chain() 在每帧重复调用导致的异常中断。
本文详解如何在 phaser 3 中精准控制动画序列：让起始动画（如“起步”）仅播放一次，随后无缝衔接并循环播放主动画（如“行走”），避免 `anims.chain()` 在每帧重复调用导致的异常中断。
在 Phaser 3 中，anims.chain() 是一个强大的工具，但它并非“一次性触发”机制——若在 update() 循环中反复调用（例如每次按键按下都执行 chain()），会导致动画状态混乱：链式动画可能被多次注册、覆盖或中断，从而无法按预期衔接。你遇到的问题（startWalking 播完后 walking 不自动循环）正是源于此。
✅ 正确思路：基于动画状态 + 事件驱动，而非每帧硬绑定
核心原则是：只在动画真正结束时触发下一段，且确保循环动画具备 repeat: -1 属性。以下是两种经过验证的可靠方案：
方案一：使用 animationcomplete 事件监听（推荐，语义清晰）
为起始动画注册一次性的完成监听器，在回调中播放循环动画，并自动移除监听器防止重复触发：
// 在 create() 中定义动画后添加：
this.soma.anims.create({
key: 'startWalking',
frames: this.anims.generateFrameNumbers('walking-anim', { start: 19, end: 20 }),
frameRate: 10,
repeat: 0 // 显式声明不重复（虽为默认值，但增强可读性）
});
this.soma.anims.create({
key: 'walking',
frames: this.anims.generateFrameNumbers('walking-anim', { start: 21, end: 37 }),
frameRate: 10,
repeat: -1 // 关键！-1 表示无限循环
});
// 在 create() 或初始化逻辑中绑定一次监听
const onStartWalkComplete = () => {
this.soma.anims.play('walking', true); // true = force restart if already playing
// 移除监听器，避免多次触发
this.soma.off('animationcomplete', onStartWalkComplete);
};
// 注意：此处仅绑定，不立即播放
this.soma.on('animationcomplete', onStartWalkComplete);
然后在 update() 中，仅当开始移动时播放起始动画（不重复绑定）：
update() {
this.soma.body.setVelocityX(0);
if (this.left.isDown) {
this.soma.body.setVelocityX(-velocity);
this.soma.flipX = true;
// 仅当未在行走/起步时才触发起步动画
if (!this.soma.anims.isPlaying || this.soma.anims.currentAnim.key === 'idle') {
this.soma.anims.play('startWalking');
}
} else if (this.right.isDown) {
this.soma.body.setVelocityX(velocity);
this.soma.flipX = false;
if (!this.soma.anims.isPlaying || this.soma.anims.currentAnim.key === 'idle') {
this.soma.anims.play('startWalking');
}
} else {
// 停止移动时切回 idle
if (this.soma.anims.currentAnim.key !== 'idle') {
this.soma.anims.play('idle', true);
}
}
}
方案二：状态轮询判断（轻量，适合简单逻辑）
在 update() 中检查当前动画是否已结束，并手动切换：
update() {
// ... 移动逻辑同上 ...
// 动画状态管理
const currentAnim = this.soma.anims.currentAnim?.key;
if ((this.left.isDown || this.right.isDown)) {
if (currentAnim === 'idle' || currentAnim === 'walking') {
// 已在行走中，保持 walking
if (currentAnim !== 'walking') {
this.soma.anims.play('walking', true);
}
} else if (currentAnim === 'startWalking') {
// 起步动画正在播放，无需操作，等待其自然结束
} else {
// 非行走/起步/空闲态 → 播放起步
this.soma.anims.play('startWalking');
}
} else {
if (currentAnim !== 'idle') {
this.soma.anims.play('idle', true);
}
}
}
⚠️ 关键注意事项：
- anims.chain() 必须在动画播放前调用（如 play() 后立即 chain()），且仅需调用一次；在 update() 中每帧调用会重置链表，导致失效。
- 所有循环动画务必设置 repeat: -1，否则即使链式触发也只播一遍。
- 使用 anims.play(key, true) 的 true 参数可强制重启动画，避免因中途切换导致卡顿。
- 避免依赖 startWalkingPlayed 这类手动标志位——Phaser 的 anims.currentAnim.key 和 isPlaying 属性更可靠。
通过以上任一方案，即可实现「起步动画播完即无缝循环行走」的流畅体验。推荐优先采用事件监听方案，逻辑解耦、可维护性强，符合 Phaser 3 的响应式设计哲学。
