1

5秒ごとにアニメートしたいパスがあります。次のコードでsetIntervalを使用してみましたが、キャンバスが複製され続けます。より簡単な解決策はありますか？

JSフィドルリンク

window.onload= function aa () {

    paper = Raphael(0,0,900,900);    

    var p=paper.path("M10,10 h20 v10 h-20z");
    p.animate({path:"M10,10 h300 v10 h-300z"},5000);

    //window.setInterval(aa(), 5000);
}​
4

1 に答える 1

1

aaラファエル紙 ( ) を初期化する関数全体を繰り返していますpaper = Raphael(0,0,900,900);。そのため、キャンバスが複製されます。さらに、アニメーションをトリガーするよりも
、コールバックを使用する方が良いでしょう (のドキュメントを参照してください)。 これは私がそれをコーディングする方法です：animatesetInterval

function init(){
    var paper = Raphael(0, 0, 900, 900),
        pathsString = ["M10,10 h20 v10 h-20z","M10,10 h300 v10 h-300z"],
        p = paper.path(pathsString[0]),
        animationCounter = 0, 
        animationDuration = 5000,
        animate = function(){
            animationCounter++;
            p.animate({path : pathsString[animationCounter %2]}, animationDuration, animate);
        };

    animate();
};
window.onload = init;​

上記のコードの実際の例を次に示します。

于 2012-09-30T16:59:17.327 に答える