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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
