Bagaimana untuk Mendikit permintaanAnimationFrame kepada Kadar Bingkai Tertentu?

Permintaan pendikitAnimationFrame kepada Kadar Bingkai Tertentu

permintaanAnimationFrame telah menjadi kaedah pilihan untuk animasi kerana kelancaran dan pengoptimumannya. Walau bagaimanapun, terdapat situasi di mana mengawal kelajuan animasi dikehendaki. Artikel ini membincangkan cara pendikitan requestAnimationFrame kepada kadar bingkai tertentu, memastikan kelajuan animasi yang konsisten tanpa mengira prestasi peranti.

Satu pendekatan untuk pendikitan ialah dengan mengira masa berlalu sejak gelung bingkai terakhir dan hanya melukis apabila FPS yang ditentukan selang telah berlalu. Kaedah ini melibatkan penetapan pembolehubah untuk menjejak selang masa.

<code class="javascript">var fpsInterval = 1000 / fps; // Convert FPS to milliseconds
var then = Date.now(); // Start time of the current animation loop</code>

Gelung animasi dilaksanakan menggunakan requestAnimationFrame dan dipanggil secara berterusan. Dalam gelung, masa berlalu sejak gelung terakhir dikira dan lukisan dilakukan hanya apabila selang FPS yang ditentukan telah berlalu.

<code class="javascript">function animate() {
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;
    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval); // Adjust for non-multiple FPS intervals
        // Put your drawing code here
    }
}</code>

Dengan menggunakan teknik pendikit ini, kod lukisan dilaksanakan pada masa yang ditentukan FPS, memberikan kelajuan animasi yang konsisten walaupun pada peranti dengan keupayaan prestasi yang berbeza-beza.

Atas ialah kandungan terperinci Bagaimana untuk Mendikit permintaanAnimationFrame kepada Kadar Bingkai Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!