Raphael Javascriptアニメーションのシーケンスのアニメーション

Question

JavaScriptを使用して、オブジェクトの配列を作成しました。オブジェクトのプロパティの1つはRaphaelシェイプです。

$.each(arr, function() {});を使用して、私は図形を描いていますが、fadeInをすばやく続けてください。だからarr[1].hexagonはfadeIn、次にarr[2]などとなります。私はオブジェクトに.animate()を添付するだけで、それらのすべてをfadeInにまとめることができましたが、JavaScriptをどのようにタイムアウトさせるか分かりません。

私はより一般的に、RaphaelまたはjQueryを使用してシーケンスと時間を制御するヒントはありますか？

Answer 1

これは、ラファエルやjqueryのを使用していますが、JavaScriptで配列上の反復を遅らせるだけの方法ではありません。

var doSomethingWithValue = function(v) { 
    // your call to animate the object, or do anything really. 
    console.log(v); 
} 

var timer = function(a, n) {  
    var delay = 1000; // a second, probably change this to same duration as the fadeIn() 
    doSomethingWithValue(a[n]); // do work 
    n += 1; 
    if (n == a.length) { 
     // if we're at the end, return 
     return; 
    } else { 
     // repeat after delay 
     setTimeout(function() {timer(a, n)}, delay); 
    } 
} 

var arr = [1,2,3]; 
// kick things off starting at first entry 
timer(arr, 0); 

はあなたのためにその仕事をしていますか？

Answer 2

は、このコードを使用してみてください：

for(var i=0;i < numofObj;i++){

Obj[i].animate({any animate you choose  },1000,function(){ 
Obj[i+1].animate({any animate you choose},1000); 

});

次OBJアニメーションだけ前の終わりを行います

...

Answer 3

私はこの問題を解決するために必要なのが、上の依存したくありませんでしたsetTimeout（ブラウザが最小化されたときにタイマーが異常に動作し、Raphaelを正しく使用していないようです）。

したがって、trampolinesに触発されて、私はアニメーションキューを作った。

一般的な戦略は、匿名関数をキューにプッシュすることです。関数のどこかで、animations.nextが直接呼び出されるか、トリガーするアニメーションに指定される必要があります。

animations = function() { 
    var animationQueue = [] 
    , obj = {} 

    obj.push = function(fn) { 
    animationQueue.push(fn) 
    } 

    obj.next = function() { 
    if (animationQueue.length !== 0) { 
     animationQueue.shift().call() 
    } 
    } 

    return obj 
}() 

その後、数回このような何かを行うことができます。

animations.push(function() { 
    paper.circle(x, y, 2) 
    .attr('fill', '#fff') 
    .animate({r: radius}, animationSpeed, animations.next) 
}) 

最後に、それはあなたがやっているものは何でもあるの終わりに、チェーンを開始するanimations.next()を呼び出します。

Answer 4

raphael Element.animateメソッドが提供するコールバックを使用する必要があります。

window.onload = function() { 
el.animate({theAnimation}, 1000, nextAnim); 
} 

function nextAnim(){ 
el2.animate({theAnimation2}, 1000); 
} 

アニメーションが終了すると、コールバックは指定された関数を呼び出します。これを必要なだけ何度も繰り返すことができます。