9

で遊んでいますrequestAnimationFrameが、Chrome 以外のブラウザでは非常にぎくしゃくしたアニメーションが表示されます。

次のようなオブジェクトを作成します。

var object = function() {

    var lastrender = (new Date()).getTime();
    var delta = 0;

    return {

        update: function() {
             //do updates using delta value in calculations.
        },

        loop: function() {
            var looptimestamp = (new Date()).getTime();
            delta = looptimestamp - lastrender;
            lastrender = looptimestamp;

            this.update();

            window.requestAnimationFrame(this.loop.bind(this));
        }
    };
}

現在、キャンバス要素に単一の長方形を描画して移動しています。これは、プロセッサ上での非常に軽量な操作です。これは Chrome で非常にスムーズに実行されており、デルタ値をコンソール ログに記録すると、約 17 前後でほぼ一貫しています。ただし、Firefox または Safari で同じことを行うと、次のデルタ値が得られます。

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on

ブラウザがディスプレイとうまく同期していないように見えますが、Chrome 以外の場合は、ターゲット タイムアウトとして 16 ミリ秒の古い setTimeout メソッドを使用すると、よりスムーズなアニメーションが得られます。

requestAnimationFrameChrome 以外のブラウザを使用してよりスムーズなアニメーションを取得できるかどうかは誰にもわかりませんか? Firefox で上記に投稿されたものよりも安定したデルタ値を取得することに成功した人はいますか?

4

2 に答える 2

4

アニメーションのスムーズなフレームレートが低下する理由は、キャンバスに関するブラウザのメモリが原因です。ブラウザでのパフォーマンスの実際の詳細はわかりませんが、Firefox ではほとんどすぐにフレームレートが低下し、Chrome ではしばらくしてから低下します。

フレームレート低下の本当の問題は、canvas 要素がメモリを占有しているためです。キャンバスに何かを描画するたびに、その操作がキャンバスのパスに保存されます。このパスは、キャンバスに何かを描画するたびにより多くのメモリを占有します。キャンバスのパスを空にしないと、フレームレートが低下します。でキャンバスをクリアしてもキャンバス パスを空にすることはできませんcontext.clearRect(x, y, w, h);。代わりに、で新しいパスを開始してキャンバス パスをリセットする必要がありますcontext.beginPath();。例えば：

// function that draws you content or animation
function draw(){
    // start a new path/empty canvas path
    canvas.beginPath(); 

    // actual drawing of content or animation here 
}
于 2014-05-25T18:37:36.013 に答える
0

デルタ < しきい値の場合に更新をスキップすると、アニメーションがよりスムーズになる場合があります。次に例を示します。

if (delta > 5) this.update();
于 2013-12-11T13:25:44.560 に答える