1

事前にレンダリングする必要があるキャンバスがたくさんあります (約 200)。ブラウザーがそれらをレンダリングしている間、ページの他の部分 (プログレス バーなど) は変更中に再描画されないため、ページの更新やアニメーションがぎこちなくなります。キャンバスの描画を経由で呼び出してみましたwindow.requestAnimationFrameが、改善されませんでした。

より頻繁に再描画するように強制するにはどうすればよいですか?

アニメーション フレームの使用例

//This is done  200 times (once for each canvas)
function draw()
{
    //Draw the image to canvas
    context.drawImage( ... );
}

requestAnimationFrame( draw );
4

3 に答える 3

2

rAF は新しいフレーム (モニターと同期)のみを要求できます。フレームを取得できるという保証はありません。

コードが利用可能なタイム バジェット (60 Hz システムで約 16.7 ミリ秒) を超える場合 (200 のキャンバスを更新する場合など)、次のフレームが利用可能になるまでフレームを取得できません。

コードが多くの時間を使用する場合、これは将来多くのフレームになる可能性があり、アニメーションは「ぎくしゃく」して表示されます。

このような場合は、setIntervalf.ex を使用してフレーム レートを下げた方がよいでしょう。遅延は1000/15で、モニター同期で時々更新されないことに耐えてください。

200 個のキャンバスを更新するということは、更新領域も通常のキャンバス サイズの 200 倍になるということです。さらに、ブラウザは 1 つだけではなく 200 要素の再描画を維持する必要があります。JavaScript でできることは限られています。

于 2013-10-17T18:54:19.307 に答える
0

http://www.paulirish.com/2011/requestanimationframe-for-smart-animation/

ブラウザーは、同時実行アニメーションを単一のリフローおよび再描画サイクルにまとめて最適化し、より忠実度の高いアニメーションを実現できます。たとえば、CSS トランジションまたは SVG SMIL と同期した JS ベースのアニメーション。さらに、表示されていないタブでアニメーション ループを実行している場合、ブラウザーはそれを実行し続けません。つまり、CPU、GPU、およびメモリの使用量が少なくなり、バッテリー寿命が大幅に長くなります。

于 2013-10-17T18:47:29.550 に答える
0

私は次のようにします：

//This is done  200 times (once for each canvas)
function draw()
{
    //Draw the image to canvas
    context.drawImage( ... );
}

function loop()
{
    draw();
    requestAnimationFrame( loop );
}

loop();

このようにして、ブラウザによって毎秒最大 60 フレームに制限される無限ループを作成します。ブラウザやパソコンが遅いとフレームレートが低下します。私の経験では、パフォーマンスが向上します。

于 2013-10-17T18:55:33.390 に答える