JQueryで一連の行をアニメーション化する

Question

一連のアニメーションをチェーンに追加する正しいJQueryの方法を理解するのに問題があります。私はあなたのシーケンスを事前に知っていれば、.animate（）。animate（）することができますが、各アニメーションのステップは私の場合は動的です。私は伝統的なforloopをいくつかのタイプのJquery .each（）ループに変更して、すべてをチェーンして順番に実行する必要があると思います。

私はJquery.svg.anim.js（jquery svg animation）を使用しています。

私は、次のステップに関連する描画時間を持つポイントの配列を持っています。 "G" は、私の座標は、私は、このループを通して上記を実行G [X] [Y] .X => PXとG [X] [Y] .Y => Pxの

step[0] = {P:G[0][0], T:500}; 
step[1] = {P:G[0][1], T:2000}; 
step[2] = {P:G[3][1], T:100}; 

あるグリッドであります：

for(s=0;s<(step.length-1);s++){ 
    var line1 = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10}); 
    $(line1).animate({svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, step[s].T); 
} 

これは、その、一度にすべてのアニメーションをやって、適切に連鎖していないため、適切な位置へと時間の正確な長さにわたって、もちろんの行のすべてを描くように動作します。 step []配列は任意の長さになります。データ構造を変更する必要がある場合は、この時点でこれを行うことができます。

これをJQueryの方法で正しく書くことができます。ここで、配列や何らかのコレクションを取り込み、各アニメーションを連続して実行できますか？最終的には、SVGグリッド上の点に任意の一連の線を順番に描画し、遅れて各線をフェードアウトさせたいと思います。これは最終的に、シーケンスが大きくなったり大きくなったりするゲームのような "Simon"ビート/タイミングのためになり、シーケンスをビートに適切にリトレースする必要があります。

---

編集：ためにそれをロードするために取り組んでいる、次が、それがために2つのループの醜いようだ：

for(s=0;s<(step.length-1);s++){ 
    line = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10});  
    n=s+1; 
    $('#myQueue').queue('myQueue',function(next){ 
      $(line).animate(
      {svgX2: step[n].P.x, svgY2: step[n].P.y}, 
      {duration: step[s].T, queue: false, complete: next} 
      ) 
    })  
} 
$('#myQueue').dequeue('myQueue'); 

：

var line = new Array();  
for(s=0;s<(step.length-1);s++){ 
    line[s] = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10});  
} 

$.each(line, function(s, thisLine) { 
    $('#myQueue').queue('myQueue',function(next){ 
      $(thisLine).animate(
      {svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, //step[s].T 
      {duration: step[s].T, queue: false, complete: next} 
     ) 
     }) 
}); 
$('#myQueue').dequeue('myQueue'); 

しかし、私はこのようにそれを行う場合

最後のものだけが描画されます。この値は参照か？私はオブジェクトに新しい行をラップしようとしましたが、それは助けに見えませんでした。 更新：いくつかのテストを行うことで、キュー内の操作が追加されるまで実行されないため、上記の「s」の値はすでにすべてインクリメントされているため、上記は機能しません。つまり、イテレータが再起動されるため、2つのループを持つものが動作しています。私はこれをどのように対処するのだろうと思いますが、うまくいきません。

---

最終バージョン：JavascriptとJqueryのスコープの謎が浮かび上がっているようです。私はこれを今作業するようにして、私のアプリの最初の反復の残りの部分を作りました。私はまだ、なぜ特定の配置は本当にわからないと仕事が流れ、他の人はそうではないが、これを読み取って他の誰のための参照用：

$.each(step, function(s, thisStep) { 
    $('#myQueue').queue('myQueue',function(next){ 
     var thisLine = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: lineColor()/*colours[random(9)]*/, strokeWidth: 10, id: 'line'+(s+1)}); 
     $(thisLine).animate(
      {svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, //step[s].T 
      {duration: step[s].T, queue: true, complete: next} 
     );   
    }); 
}); 
$('#myQueue').dequeue('myQueue'); 

私は、これは自分自身を混乱見つけるので、私は他人のためにこれを説明してみましょうwho float by：$ .eachは、配列に対して繰り返しループを実行できるようにします。カウンターはありません。したがって、ネストの先頭にセンチネルチェックを追加するか、すべてを繰り返し処理したくない場合は他のロジックを実行する必要があります（特定の制限に基づいて反復したいので、デフォルトの "fx"キューではなく、名前付きキューに追加する予定です。これにより、アニメーションに一連のステップをグループ化し、「デキュー」を呼び出すときに、同時に（同時にではなく）すべてを一度に実行することができます。注目すべき重要な点は、キュー関数の2番目のパラメータである "next"という名前のコールバック関数です。なぜですか？ "animate（）"の2番目の引数であるコレクションには "complete：next"があるので、これが終わったらコールバック関数を呼び出します。その他の重要な設定は "queue：true"です。falseに設定されていると、すべてが同時に発生します。私はこれが再帰を設定するかどうか、あるいは単にキューに順番に追加するかどうかはわかりませんが、この設定は私にとってはうまくいきます。ループ内でキュー呼び出しを行う必要はありません。 div＃myQueueについての疑問がある場合は、名前付きキューを保持するためのDOM内の隠されたdivです。おそらくすでに存在していて実際の目的を持っている可能性があります。

JFooでもっと熟練した人が助けてくれることを願って、以下にコメントを追加してください。

Answer 1

あなただけの遅延を使用することができます。

var totalDelay=0; 

for(s=0;s<(step.length-1);s++){ 
    var line1 = svg.line(step[s].P.x, step[s].P.y, step[s].P.x, step[s].P.y, {stroke: 'blue', strokeWidth: 10}); 
    $(line1).delay(totalDelay).animate({svgX2: step[s+1].P.x, svgY2: step[s+1].P.y}, step[s].T); 
    totalDelay+=step[s].T; 
} 

独自のjqueryキューの使用を検討することもできます。これと似たようなもの：Single queue for jQuery animate() elements

Answer 2

同様の質問がちょうどあなたがそこに答えを見つけることが、頼まれた：

Animate elements sequentially using CSS3 and jQuery

私もちょうど私自身の好奇心のためのフィドルをいじりましたが、上記の質問は、より良い解決策を持っているかもしれません私のバイオリン：

http://jsfiddle.net/jensbits/XjEjx/