Raphael JSで円にアニメーションを適用

Question

I Raphael JSで作成した1点から円をアニメートしたいと考えています。ここで

は、私が試したコードスニペットです：

for(var i=1; i<4; i++) { 
    var circle = paper.circle(width*0.4, height*0.2, 10*i); 
    circle.attr(
     { 
      stroke: '#0000d7', 
      'stroke-width': 1, 
      'stroke-linejoin': 'round' 
     } 
    ); 
    circle.animate({transform: "T0,100"}, 2000); 
} 

私は歩いて、完全な円をアニメ化。しかし、私は最初に内側の円と2番目と3番目の円が（効果として）数ミリ秒後に表示されます。しかし、私はそれをどうやって行うのか分かりません。

Answer 1

これは任意の数の円に拡張できると仮定して、使用していたのと同様のsetTimeoutとループを使用します。

アニメーションをループから機能させるには、アニメーションが後で実行されるときに参照している円がわかるように 'クロージャー'を使用する必要があります（そうでない場合、最後のオブジェクト）。

（function（）{}）（）（イミディエイトモードと呼ばれる）の関数形式を使用すると、変数が関数スコープ内に取り込まれるようになります。

for(var i=1; i<10; i++) { 
    (function() {     // start closure with functional scope 
     var circle = paper.circle(width*0.4, height*0.2, 10*i); 
     setTimeout(function() { circle.animate({transform: "T0,100"}, 2000); }, (i-1) * 2000 ) 
    })(); 
} 

jsfiddle

あなたが最初にすべての円を希望しない場合、あなたはまだ指数（私たちは関数の中でそれを明確にするために、Cに割り当てます）私をキャプチャするための閉鎖を必要とします。例えば

for(var i=1; i<10; i++) { 
    (function() {     // start functional scope 
     var c = i;     // c is now tied to this scope 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate({transform: "T0,100"}, 2000); 
     }, (c-1) * 2000 ) 
    })(); 
} 

jsfiddle

は、私がここにアニメーションオブジェクトを作成する必要がありますわからないんだけど、あなたがしたい場合、ドキュメントはhere

同じ例ですが、ラファエルを使用します。アニメーション。

var animation = Raphael.animation({transform: "T0,100"}, 2000) 

for(var i=1; i<10; i++) { 
    (function() { 
     var c = i; 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate(animation); 
     }, (c-1) * 2000 ) 
    })(); 
} 

jsfiddle