For-loop 不适用于 JavaScript 动画

Posted 2023-03-28

【中文标题】For-loop 不适用于 JavaScript 动画

【英文标题】：For-loop not working for JavaScript animation

【发布时间】：2017-03-20 00:41:56

【问题描述】：

我正在尝试编写一个 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();
    

);

我也尝试将动画方法直接放入 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');
    
;

【参考方案1】：

动画不同步。我的意思是for 循环在执行循环的下一步之前不会等待动画完成。他们都将同时开始。

您需要做的是在第一个动画完成后触发下一个动画。 RaphaelJS 允许您将函数传递给 animate() 方法，该方法在动画完成时被调用。

请参阅以下问题以获取示例：

animating paths with raphael