0 
obj.animate(anim.repeat('Infinity').delay(500));

これの繰り返しのサイクルは、実際には次のとおりです。遅延、アニメーション、遅延、アニメーション、遅延アニメーション...など。

作り方: 遅延、アニメーション、アニメーション、アニメーション...など - 遅延は最初のサイクルのみです。

setTimeout私は多くの要素をアニメーション化しており、各 setTimeout には javascript ブラウザー タイマーの異なるインスタンスがあり、異なる要素のアニメーションは非同期である可能性があるため、使用したくありません。

4

1 に答える 1

0

これは興味深いです。オプションの callback パラメータを使用して、この方法で巧妙に更新できると思いましたが、これは機能しません。

anim = Raphael.animation({transform: "r45"}, 500, function(e) {  anim.del = 0; }).delay(1000);

ソースをちらりと見ると、アニメーションのパラメーターは反復ごとに更新されていないように見えます (私は思います)。

これは機能しますが、 setTimeout メソッドと機能的にどのように異なるかはわかりません。

var paper = Raphael(0,0,500,500),
    square = paper.rect(50,50,50,50).attr("fill", "#009900"),
    //anim = Raphael.animation({transform: "r45"}, 500, function(e) {  console.log(anim); anim.del = 0; }).delay(1000);
    anim = Raphael.animation({opacity: 0}, 1000, function() { this.attr("opacity", 1); /* this callback is just to reset the effect for my dummy animation */ }),
    wait = Raphael.animation({opacity: 1}, 500, function () { this.animate(anim.repeat("Infinity")); /* this callback triggers the actual animation after a 500ms placebo animation */ });

square.animate(wait);

jsフィドル

ご覧のとおり、これは 500 ミリ秒のアニメーションを視覚効果なしで 1 回だけ実行し、コールバックで実際のアニメーションを呼び出します。

于 2012-12-31T13:50:32.793 に答える