防止多个动画在循环中同时发生

Question

我正在制作一个简单的 Simon Says 风格游戏，并使用 for 循环遍历已添加的颜色数组。当前，每次单击按钮时，它都会添加一种颜色并运行 for 循环。我的问题是，当满足两个条件时，不是为一种颜色设置动画，然后是另一种颜色，而是同时为两种颜色设置动画。我尝试使用 setInterval ，它只是做了一个无限循环，而 setTimeout 只是让第一个动画在它发生之前等待。有谁知道我怎样才能让每种颜色一次动画一个？

在我的演示中，请滚动到 js 的底部。顶部是 color.js，它允许彩色动画。单击该按钮几次以查看动画的表现。

DEMO

var colors = [];
var red, yellow, blue, green;

//random number
mathF = function() {
    return Math.random();
};

//determine what color is added
function newColorF() {
    var math = mathF();
    if(math <= .25) {
        newColor = 'red';
    }
    else if(math <= .5) {
        newColor = 'green';
    }
    else if(math <= .75) {
        newColor = 'yellow';
    }
    else {
        newColor = 'blue';
    }
    return newColor;
}

function computerTurn() {
    newColor = newColorF();
    colors.push(newColor);
    var colorlength = colors.length;
    setTimeout(function() {
    for(i=0; i<colorlength; i++) {
        x = colors[i];
        console.log(x);
        if(x === 'red') {
            $('#red').animate({
                backgroundColor: '#ff9e9e'
            }, 750)
            .delay(250)
            .animate({
                backgroundColor: 'red'
            }, 750);
        }
        else if(x === 'green') {
            $('#green').animate({
                backgroundColor: '#bdffbd'
            }, 750)
            .delay(250)
            .animate({
                backgroundColor: 'green'
            }, 750);
        }
        else if(x === 'yellow') {
            $('#yellow').animate({
                backgroundColor: '#ffffc2'
            }, 750)
            .delay(250)
            .animate({
                backgroundColor: 'yellow'
            }, 750);
        }
        else {
            $('#blue').animate({
                backgroundColor: '#a3a3ff'
            }, 750)
            .delay(250)
            .animate({
                backgroundColor: 'blue'
            }, 750);
        }
    }
}, 500);
}
//when begin button is pushed
function beginGame() {
    computerTurn();
}

$('#startGame').click(function() {
    beginGame();
});

Answer 1

我能想到的一个可能的解决方案是使用animate 函数的complete 回调参数。

function computerTurn() {
    newColor = newColorF();
    colors.push(newColor);
    var colorlength = colors.length;

    var i = 0; // Our iteration variable

    var check = function() { // the function to increment i and go to next step of animation, or exit
        i++;
        if (i < colorlength) {
            step();
        }
    };

    var step = function() {
        x = colors[i];
        console.log(x);
        if (x === 'red') {
            $('#red').animate({
                    backgroundColor: '#ff9e9e'
                }, 750)
                .delay(250)
                .animate({
                    backgroundColor: 'red'
                }, 750, check); // <--- attached check function here
        } else if (x === 'green') {
            $('#green').animate({
                    backgroundColor: '#bdffbd'
                }, 750)
                .delay(250)
                .animate({
                    backgroundColor: 'green'
                }, 750, check); // <--- attached check function here
        } else if (x === 'yellow') {
            $('#yellow').animate({
                    backgroundColor: '#ffffc2'
                }, 750)
                .delay(250)
                .animate({
                    backgroundColor: 'yellow'
                }, 750, check); // <--- attached check function here
        } else {
            $('#blue').animate({
                    backgroundColor: '#a3a3ff'
                }, 750)
                .delay(250)
                .animate({
                    backgroundColor: 'blue'
                }, 750, check); // <--- attached check function here
        }
    };

    step(); // For the initial step in the animation
}

在这里，我所做的不是使用for 循环遍历colors 数组，而是通过complete 回调使用递归方法，animate 接受它作为其最后一个参数。

---

来自complete上的文档：

完成

类型：函数()

元素上的动画完成后调用的函数。

---

我已将代码分解为 2 个函数：step 和 check。

step 执行动画的下一步。

check 用于检查数组是否完全迭代。如果是，则退出。否则，请致电step。

最后，我手动调用了step 来开始动画序列。

---

注意：可能有更好的解决方案，我不确定。

Answer 2

在我看来，你的意思是让动画排队？ animate() 实际上通过 queue 属性允许这样做：

    if(x === 'red') {
        $('#red').animate({backgroundColor: '#ff9e9e'}, {
        queue: true,
        duration: 750,
        delay: 250
    });