2016-11-06 5 views
2

シェイプ・ボタンがクリックされてもforループが動作していない/実行中で、 'explode'パスのアニメーションを繰り返すforループを作成しようとしています。どこが間違っているか見ない。 forループを目指します:パスをアニメーション化し、アニメーションを元のパスに戻す処理をループします。私は問題がループの直前にexplode.animate()メソッドとしてforループのどこかにあることを知っています。ForループがJavaScriptアニメーションで機能しない

注:私はまた、機能として、ループがまだ動作しないためにそれらを書くのではなく、ループのために直接アニメーション・メソッドを入れて試してみましたが、このアニメーション

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(); 
    } 
} 
}); 

ためRaphaël.jsのを使用しています。

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

アニメーションは同期していません。これにより、ループの次のステップを実行する前にアニメーションが終了するのをループが待たないことを意味します。彼らはすべて同時に開始されます。

最初のアニメーションが完了したら、次のアニメーションをトリガーする必要があります。 RaphaelJSを使用すると、アニメーションが終了したときに呼び出されるanimate()メソッドに関数を渡すことができます。

例えば、次の質問を参照してください。

animating paths with raphael

+0

はありがとうございました:) – PandaKMusic

関連する問題