ホームページ > 記事 > ウェブフロントエンド > requestAnimationFrame を使用してアニメーションの FPS を制御する方法
requestAnimationFrame による FPS の制御
requestAnimationFrame は、スムーズなアニメーションを実現するための推奨方法となっていますが、さまざまな速度で実行される場合があります。一貫したフレーム レートを確保する手法は次のとおりです。
RequestAnimationFrame を特定の FPS にスロットルします
このメソッドは、条件付きチェックを使用して、指定された FPS が達成された場合にのみアニメーション コードを実行します。間隔が経過しました。
実装:
変数の初期化:
アニメーションの開始:
アニメーション ループ:
描画コード:
コード例:
<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 サイトの他の関連記事を参照してください。