如何在循环中用await结合Promise.all实现动画分阶段顺序播放？

云上老周

2026-7-28

解决动画阶段顺序执行问题

问题根源

当前代码中，game.animationPhases的每个元素是直接调用animate()后得到的finished Promise——这会立即触发动画。所有阶段的动画在初始化这个对象时就已经同时启动，后续的await Promise.all只是等待已运行的动画结束，自然无法实现阶段顺序执行。

修改方案

1. 调整动画阶段存储结构

将每个动画改为函数形式，只有主动调用函数时才会触发动画，避免提前执行：

game.animationPhases = {
    phaseA: [ function() { return x.animate(example).finished; } ],
    phaseB: [ function() { return y.animate(example).finished; }, function() { return z.animate(example).finished; } ],
    phaseC: [] 
}

2. 更新顺序执行函数

遍历阶段时，先调用当前阶段的所有动画函数触发动画，再用Promise.all等待该阶段动画全部完成后进入下一阶段：

async function animatePhasesInSequence(){
    // 遍历所有阶段（若需严格固定顺序，可手动指定数组如['phaseA', 'phaseB', 'phaseC']）
    let phaseKeys = Object.keys(game.animationPhases);
    for (let i = 0; i < phaseKeys.length; i++) {
        let key = phaseKeys[i];
        let animationFns = game.animationPhases[key];
        
        if (animationFns.length > 0) {
            // 触发当前阶段所有动画，收集Promise
            let animationPromises = animationFns.map(function(fn) {
                return fn();
            });
            await Promise.all(animationPromises);
        }
    }
}