Bagaimana untuk mengawal fps menggunakan requestAnimationFrame?-tutorial js-php.cn

如何使用 requestAnimationFrame 控制 fps？

fps ialah istilah yang biasanya dikaitkan dengan video dan permainan di mana kita perlu menggunakan animasi. fps ialah singkatan bagi bingkai sesaat dan mewakili bilangan kali skrin semasa dipaparkan semula.

Sebagai contoh, video ialah barisan imej yang berterusan. Ini bermakna ia memaparkan imej pada selang masa yang sangat singkat supaya pengguna tidak tahu bahawa ia memaparkan imej secara individu. Jika kita menurunkan fps video, ia mungkin kelihatan seperti animasi imej dan bukannya video. Oleh itu, fps yang lebih tinggi memberikan hasil yang lebih baik. Pada asasnya, fps memberitahu kami berapa kali dalam satu saat skrin perlu dikemas kini.

Kadangkala, kita perlu menggunakan JavaScript untuk mengawal fps. Terdapat pelbagai kaedah yang boleh kami gunakan, yang akan kami pelajari dalam tutorial ini.

Gunakan fungsi SetTime()

Fungsi

setTimeout() mengambil fungsi panggil balik sebagai parameter pertama dan selang masa sebagai parameter kedua. Di sini kita boleh mengawal fps dengan memaparkan semula skrin selepas setiap selang masa.

Tatabahasa

Pengguna boleh menggunakan fungsi setTimeout() untuk mengawal fps mengikut sintaks berikut.

setTimeout(() => {
   requestAnimationFrame(animate);
}, interval);

Salin selepas log masuk

Kami memanggil fungsi animate() dalam sintaks di atas menggunakan kaedah requestAnimationFrame().

Langkah

Langkah 1 - Tentukan pembolehubah totalFrames dan mulakannya kepada sifar. Ia akan merekodkan jumlah bilangan bingkai.
Langkah 2 - Juga, takrifkan pembolehubah fps dan simpan nilai fps.
Langkah 3 - Tentukan pembolehubah intervalOffps dan simpan selang ke dalamnya. Ia menyimpan 1000/fps di mana 1000 adalah milisaat dan kami mendapat selang masa dengan membahagikannya dengan fps.
Langkah 4 - Simpan masa semasa dalam pembolehubah Masa mula.
Langkah 5 - Panggil fungsi animate().
Langkah 5.1 - Panggil fungsi requestAnimationFrame() menggunakan fungsi setTimeout() selepas setiap internvalOffps.
Langkah 5.2 - Dalam fungsi panggil balik fungsi setTimeout(), pengguna boleh menulis kod untuk memaparkan semula skrin atau melukis bentuk pada Kanvas.
Langkah 5.3 - Gunakan objek Date() dan dapatkan masa semasa. Kurangkan masa mula daripada masa semasa untuk mendapatkan masa yang telah berlalu.
Langkah 5.4 - Menggunakan fungsi matematik, dapatkan jumlah fps dan jumlah masa.

Contoh 1

Dalam contoh di bawah, kami menggunakan fungsi setTimeout() untuk mengawal fps. Kami menggunakan "3" sebagai nilai untuk fps. Oleh itu, selang fps kami adalah sama dengan 1000/3. Oleh itu, kami akan memanggil kaedah requestAnimationFrame() setiap 1000/3 milisaat.

<html>
<body>
   <h3> Using the <i> setTimeOut() method </i> to control the fps with requestAnimationFrame </h3>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      // Initial frame count set to zero
      var totalFrames = 0;
      var current, consumedTime;
      
      // Set the fps at which the animation will run (say 10 fps)
      var fps = 3;
      var intervalOffps = 1000 / fps;
      var AfterTime = Date.now();
      var starting = AfterTime;
      animate();
      function animate() {
         setTimeout(() => {
         
            //  call the animate function recursively
            requestAnimationFrame(animate);
            
            // get current time
            current = Date.now();
            
            // get elapsed time since the last frame
            var elapsed = current - starting;
            
            //Divide elapsed time with frame count to get fps
            var currentFps =
            Math.round((1000 / (elapsed / ++totalFrames)) * 100) / 100;
            output.innerHTML = "Total elapsed time is equal to = " + Math.round((elapsed / 1000) * 100) / 100 + "<br>" + " secs @ ";
            output.innerHTML += currentFps + " fps.";
         }, intervalOffps);
      }
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan objek Date()

Kita boleh menggunakan objek Date() untuk mendapatkan perbezaan antara masa semasa dan masa bingkai sebelumnya. Jika perbezaan masa melebihi selang bingkai, kami akan memaparkan semula skrin. Jika tidak, kami menunggu satu bingkai selesai.

Tatabahasa

Pengguna boleh menggunakan selang masa untuk mengawal kadar bingkai mengikut sintaks di bawah.

consumedTime = current - AfterTime;
if (consumedTime > intervalOffps) {
   // rerender screen
}

Salin selepas log masuk

Dalam sintaks di atas, masa berlalu ialah perbezaan antara masa semasa dan masa apabila bingkai terakhir disiapkan.

Contoh 2

Dalam contoh di bawah, kami mengambil perbezaan masa antara bingkai semasa dan bingkai terakhir. Jika perbezaan masa lebih besar daripada selang masa, kami memaparkan semula skrin.

<html>
<body>
   <h3> Using the <i> Date() object </i> to control the fps with requestAnimationFrame. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // Initial framecount set to zero
      var totalFrames = 0;
      var current, consumedTime;
      
      // Set the fps at which the animation will run (say 10 fps)
      var fps = 50;
      var intervalOffps = 1000 / fps;
      var AfterTime = Date.now();
      var starting = AfterTime;
      animate();
      function animate() {
      
         // use date() object and requestAnimationFrame() to control fps
         requestAnimationFrame(animate);
         current = Date.now();
         consumedTime = current - AfterTime;
         
         // if the consumed time is greater than the interval of fps
         if (consumedTime > intervalOffps) {
         
            // draw on canvas here
            AfterTime = current - (consumedTime % intervalOffps);
            var elapsed = current - starting;
            
            //Divide elapsed time with frame count to get fps
            var currentFps =
            Math.round((1000 / (elapsed / ++totalFrames)) * 100) / 100;
            output.innerHTML = "Total elapsed time is equal to = " + Math.round((elapsed / 1000) * 100) / 100 + "<br>" + " secs @ ";
            output.innerHTML += currentFps + " fps.";
         }
      }
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, pengguna boleh menetapkan fps menggunakan julat input. Selepas itu, apabila pengguna mengklik butang, ia melaksanakan fungsi startAnimation(), yang menetapkan selang fps dan memanggil fungsi animate(). Fungsi animate() memanggil fungsi drawShape() untuk melukis bentuk pada kanvas dan mengawal fps.

Di sini kami telah menggunakan beberapa kaedah untuk melukis bentuk pada kanvas. Pengguna boleh menggunakan julat input untuk menukar fps, cuba menganimasikan bentuk dan memerhatikan perbezaan dalam animasi.

<html>
<body>
   <h3>Using the <i> Date() object </i> to control the fps with requestAnimationFrame. </h3>
   <!-- creating an input range for fps -->
   <input type = "range" min = "1" max = "100" value = "10" id = "fps" />
   <button onclick = "startAnimation()"> Animate </button> <br><br>
   <!-- canvas to draw shape -->
   <canvas id = "canvas" width = "250" height = "250"> </canvas>
   <script>
      let canvas = document.getElementById("canvas");
      let context = canvas.getContext("2d");
      let animation;
      let intervalOffps, current, after, elapsed;
      let angle = 0;
      // drawing a sha[e]
      function drawShape() {
         context.save();
         context.translate(100, 100);
         
         // change angle
         context.rotate(Math.PI / 180 * (angle += 11));
         context.moveTo(0, 0);
         
         // draw line
         context.lineTo(250, 250);
         context.stroke();
         context.restore();
         
         // stop animation
         if (angle >= 720) {
            cancelAnimationFrame(animation);
         }
      }
      function animate() {
      
         // start animation and store its id
         animation = requestAnimationFrame(animate);
         current = Date.now();
         elapsed = current - after;
         
         // check if elapsed time is greater than interval, if yes, draw shape again
         if (elapsed > intervalOffps) {
            after = current - (elapsed % intervalOffps);
            drawShape();
         }
      }
      function startAnimation() {
      
         // get fps value from input
         let fpsInput = document.getElementById("fps");
         let fps = fpsInput.value;
         
         // calculate interval
         intervalOffps = 1000 / fps;
         after = Date.now();
         requestAnimationFrame(animate);
      }
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mengawal fps menggunakan requestAnimationFrame?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!