For循环不适用于JavaScript动画 [英] For-loop not working for JavaScript animation
问题描述
我试图编写一个for循环，以在单击形状按钮时重复爆炸"路径的动画，但是for循环无法正常工作/执行，我看不出它出了什么问题. for循环的目标:循环对路径进行动画处理，然后将动画反向返回其原始路径.我知道问题出在for循环中，而在循环起作用之前是explode.animate()方法.
I am trying to write a for-loop to repeat the animation of the 'explode' path when a shape button is clicked but the for loop isn't working/executing and I can't see where its gone wrong. Aim of the for loop: loop the process of animating the path and then reversing the animation back to its original path. I know that the problem is somewhere in the for loop as the explode.animate() method just before the loop works.
注意:我正在为此动画使用Raphael.js
Note: I am using Raphael.js for this animation
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循环仍然无法正常工作.
I have also tried putting the animate methods directly into the for loop instead of writing them as functions and for loop still doesn't work.
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');
}
};
推荐答案
动画不同步.我的意思是，for循环在执行循环的下一步之前不会等待动画完成.他们将同时开始.
The animation is not synchronous. By that I mean the the for loop will not wait for the animation to finish before performing the next step of the loop. They will all get started at the same time.
您需要做的是在第一个动画完成后触发下一个动画. RaphaelJS允许您将函数传递给animate()方法，该方法在动画完成时被调用.
What you need to do is trigger the next animation once the first one is complete. RaphaelJS lets you pass a function to the animate() method that gets called when the animation is finished.
有关示例，请参见以下问题:
See the following question for an example:
这篇关于For循环不适用于JavaScript动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
