Bagaimana untuk Mengawal FPS dalam Animasi Menggunakan requestAnimationFrame?

Mengawal FPS dengan requestAnimationFrame

requestAnimationFrame telah menjadi kaedah pilihan untuk animasi yang lancar, tetapi kadangkala ia boleh dijalankan pada kelajuan yang berbeza-beza. Berikut ialah teknik untuk memastikan kadar bingkai yang konsisten:

Permintaan pendikitAnimationFrame kepada FPS Tertentu

Kaedah ini menggunakan semakan bersyarat untuk hanya melaksanakan kod animasi apabila FPS tertentu selang telah berlalu.

Pelaksanaan:

1. Memulakan Pembolehubah:

   • Buat pembolehubah untuk berhenti, kiraan bingkai, masa berlalu, masa mula dan selang FPS.

2. Mulakan Animasi:

   • Mulakan ini pembolehubah dan gunakan fungsi animate() untuk memulakan gelung.

3. Gelung Animasi:

   • Kira masa berlalu sejak gelung terakhir menggunakan Date.now().
   • Jika berlalu lebih besar daripada fpsInterval, lukis bingkai seterusnya.
   • Laraskan kemudian untuk mengambil kira perbezaan antara selang FPS dan lalai RAF selang waktu.

4. Kod Lukisan:

   • Letakkan kod lukisan anda dalam semakan bersyarat (jika berlalu > fpsSelang) .

Contoh Kod:

<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>

Pendekatan ini memastikan animasi berjalan pada FPS yang ditentukan, tanpa mengira pelayar kelajuan pemaparan.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal FPS dalam Animasi Menggunakan requestAnimationFrame?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!