requestAnimationFrame を使用してアニメーションの FPS を制御する方法

requestAnimationFrame による FPS の制御

requestAnimationFrame は、スムーズなアニメーションを実現するための推奨方法となっていますが、さまざまな速度で実行される場合があります。一貫したフレーム レートを確保する手法は次のとおりです。

RequestAnimationFrame を特定の FPS にスロットルします

このメソッドは、条件付きチェックを使用して、指定された FPS が達成された場合にのみアニメーション コードを実行します。間隔が経過しました。

実装:

1. 変数の初期化:

   • 変数の作成stop、frameCount、経過時間、開始時間、および FPS 間隔。

2. アニメーションの開始:

   • これらを初期化します変数を取得し、animate() 関数を呼び出してループを開始します。

3. アニメーション ループ:

   • 経過時間を計算しますDate.now() を使用した最後のループ以降。
   • 経過時間が fpsInterval より大きい場合は、次のフレームを描画します。
   • FPS 間隔と RAF のデフォルトの差を考慮して調整します。間隔。

4. 描画コード:

   • 条件チェック内に描画コードを配置します (経過した場合 > fpsInterval) .

コード例:

<code class="javascript">var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate() {
    requestAnimationFrame(animate);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // Put your drawing code here
    }
}</code>

このアプローチにより、ブラウザーの使用に関係なく、指定された FPS でアニメーションが実行されるようになります。レンダリング速度。

以上がrequestAnimationFrame を使用してアニメーションの FPS を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。