For 循环不适用于 JavaScript 动画
For-loop not working for JavaScript animation
我正在尝试编写一个 for 循环以在单击形状按钮时重复 'explode' 路径的动画,但 for 循环不是 working/executing 而且我看不到哪里出了问题。 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();
}
}
});
我也试过直接把 animate 方法放到 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');
}
};
动画不同步。我的意思是 for
循环不会等待动画完成后再执行循环的下一步。他们将同时开始。
您需要做的是在第一个动画完成后触发下一个动画。 RaphaelJS 允许您将函数传递给 animate()
动画完成时调用的方法。
示例见以下问题:
animating paths with raphael
我正在尝试编写一个 for 循环以在单击形状按钮时重复 'explode' 路径的动画,但 for 循环不是 working/executing 而且我看不到哪里出了问题。 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();
}
}
});
我也试过直接把 animate 方法放到 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');
}
};
动画不同步。我的意思是 for
循环不会等待动画完成后再执行循环的下一步。他们将同时开始。
您需要做的是在第一个动画完成后触发下一个动画。 RaphaelJS 允许您将函数传递给 animate()
动画完成时调用的方法。
示例见以下问题:
animating paths with raphael