For循环不适用于JavaScript动画

我正在尝试编写一个for循环，以在单击形状按钮时重复“爆炸”路径的动画，但for循环不工作/执行，我看不出哪里出了问题。for循环的目的：循环设置路径动画的过程，然后将动画反转回其原始路径。我知道问题出在for循环的某个地方，因为explode.animate（）方法正好在循环工作之前

注意：我使用Raphael.js制作这个动画

var explode = paper.path("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z");
explode.attr({'fill':"yellow", 'stroke-width':"4"});
explode.hide();


function explode1() {
explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
}

function explode2() {
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
}


bomb1.click(function() {
audio.pause();
audio.currentTime = 0;
bomb1.remove();
explode.show();
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');

for(var i = 0; i < 4; i+=1) {
    if (i % 2 == 0) {
    explode1();
    } else {
    explode2();
    }
}
});

var explode=paper.path（“M 300400 l 30,50 l 40，-30 l-10,50 l 40,30 l-50,10 l 10,40 l-60，-40 l-50,30 l 10，-50 l-60，-10 l 70，-20 z”）；
explode.attr（{'fill'：“yellow”，'stroke width'：“4”}）；
explode.hide（）；
函数1（）{
爆炸。动画（{路径：（'M300400L30,50L40，-30L-10,50L40,30L-50,10L10,40L-60，-40L-50,30L10，-50L-60，-10L70，-20Z”），'fill'：“yellow”}，100，'ease out'；
}
函数2（）{
爆炸。制作动画（{路径：“M300380L5,70L60，-30L-5,70L70,30L-100，-10L-50,50L-30，-50L-90,10L80，-50L-60，-20L90,10Z”，“填充”：“橙色”}，100，“易用”）；
}
bomb1.单击（函数（）{
audio.pause（）；
audio.currentTime=0；
1.移除（）；
explode.show（）；
爆炸。制作动画（{路径：“M300380L5,70L60，-30L-5,70L70,30L-100，-10L-50,50L-30，-50L-90,10L80，-50L-60，-20L90,10Z”，“填充”：“橙色”}，100，“易用”）；
对于（变量i=0；i<4；i+=1）{
如果（i%2==0）{
1（）；
}否则{
2（）；
}
}
});

我还尝试将动画方法直接放入for循环，而不是将它们作为函数写入，而for循环仍然不起作用

bomb1.click(function() {
    audio.pause();
    audio.currentTime = 0;
    bomb1.remove();
    explode.show();
    explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');

for(var i = 0; i < 5; i+=1) {
    if (i % 2 == 0) {
    explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
    } else {
    explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
    }
};

bomb1.单击（函数（）{
audio.pause（）；
audio.currentTime=0；
1.移除（）；
explode.show（）；
爆炸。制作动画（{路径：“M300380L5,70L60，-30L-5,70L70,30L-100，-10L-50,50L-30，-50L-90,10L80，-50L-60，-20L90,10Z”，“填充”：“橙色”}，100，“易用”）；
对于（变量i=0；i<5；i+=1）{
如果（i%2==0）{
爆炸。动画（{路径：（'M300400L30,50L40，-30L-10,50L40,30L-50,10L10,40L-60，-40L-50,30L10，-50L-60，-10L70，-20Z”），'fill'：“yellow”}，100，'ease out'；
}否则{
爆炸。制作动画（{路径：“M300380L5,70L60，-30L-5,70L70,30L-100，-10L-50,50L-30，-50L-90,10L80，-50L-60，-20L90,10Z”，“填充”：“橙色”}，100，“易用”）；
}
};

动画不同步。我的意思是

for

循环不会等到动画完成后再执行循环的下一步。它们将同时开始

您需要做的是在第一个动画完成后触发下一个动画。RaphaelJS允许您将函数传递给

animate（）

方法，该方法在动画完成时被调用

有关示例，请参见以下问题：