Diperkenalkan
Pengatur waktu selalu menjadi teknologi inti dari animasi JavaScript. Kunci untuk menulis loop animasi adalah untuk mengetahui berapa lama penundaannya sesuai. Di satu sisi, interval loop harus cukup pendek sehingga efek animasi yang berbeda dapat tampak halus dan halus; Di sisi lain, interval loop harus cukup lama sehingga browser dapat membuat perubahan.
Frekuensi penyegaran sebagian besar monitor komputer adalah 60Hz, yang kira -kira setara dengan mengecat ulang 60 kali per detik. Sebagian besar browser akan membatasi operasi ulang untuk tidak melebihi frekuensi ulang monitor, karena bahkan jika itu melebihi frekuensi itu, pengalaman pengguna tidak akan meningkat. Oleh karena itu, interval loop optimal untuk animasi paling halus adalah 1000ms/60, yang kira -kira sama dengan 16,6ms
Dan masalah dengan SetTimeout dan SetInterval adalah bahwa mereka tidak akurat. Mekanisme berjalan intrinsik mereka menentukan bahwa parameter interval waktu sebenarnya hanya menentukan berapa lama untuk menambahkan kode animasi ke antrian utas UI browser untuk menunggu eksekusi. Jika tugas -tugas lain telah ditambahkan ke antrian, kode animasi harus menunggu sampai tugas -tugas sebelumnya selesai sebelum menjalankannya.
RequestanimationFrame menggunakan interval waktu sistem untuk mempertahankan efisiensi gambar terbaik, dan tidak akan overdraw karena waktu interval yang singkat, yang akan meningkatkan overhead; Penggunaan animasi juga tidak macet dan tidak mulus karena waktu interval terlalu lama, sehingga berbagai efek animasi web dapat memiliki mekanisme penyegaran terpadu, sehingga menghemat sumber daya sistem, meningkatkan kinerja sistem, dan meningkatkan efek visual
Fitur
【1】 Permintaan permintaan akan memusatkan semua operasi DOM di setiap bingkai, lengkap dalam satu pengecualian atau reflow, dan interval waktu pengecatan ulang atau reflow diikuti dengan frekuensi penyegaran browser
【2】 Dalam elemen tersembunyi atau tidak terlihat, requestanimationframe tidak akan dicat ulang atau dicerminkan, yang tentu saja berarti lebih sedikit CPU, GPU dan penggunaan memori
【3】 RequestanimationFrame adalah API yang disediakan oleh browser khusus untuk animasi. Saat dijalankan, browser akan secara otomatis mengoptimalkan panggilan metode. Jika halaman tidak diaktifkan, animasi akan secara otomatis berhenti, secara efektif menyimpan overhead CPU
menggunakan
Penggunaan RequestanimationFrame sangat mirip dengan SetTimeout, kecuali bahwa tidak perlu mengatur interval waktu. RequestanimationFrame menggunakan fungsi panggilan balik sebagai parameter, yang dipanggil sebelum browser mengecat ulang. Ini mengembalikan bilangan bulat yang mewakili nomor timer, yang dapat diteruskan ke cancelanimationframe untuk membatalkan eksekusi fungsi ini
requestId = requestanimationFrame (callback); // output konsol 1 dan 0var timer = requestAnimationFrame (function () {console.log (0);}); console.log (timer); // 1 Metode CancelAnimationFrame digunakan untuk membatalkan timer // output konsol Tidak ada var timer = requestAnimationFrame (function () {console.log (0);}); CancelanimationFrame (timer);Anda juga dapat menggunakan nilai pengembalian untuk membatalkannya secara langsung
var timer = requestAnimationFrame (function () {console.log (0);}); CancelanimationFrame (1);kompatibel
IE9-browser tidak mendukung metode ini, Anda dapat menggunakan setTimeout untuk kompatibilitas
if(!window.requestAnimationFrame){var lastTime = 0;window.requestAnimationFrame = function(callback){var currTime = new Date().getTime();var timeToCall = Math.max(0,16.7-(currTime - lastTime));var id = window.setTimeout(function(){callback(currTime + TimeToCall);}, TimeToCall); LastTime = Currtime + TimeToCall; kembalikan id;}} if (! window.cancelanimationframe) {window.cancelanimationframe = function (id) {clearTimeout (id);};}aplikasi
Sekarang gunakan tiga metode SetInterval, SetTimeout dan RequestanimationFrame untuk membuat efek sistem yang sederhana.
【1】 SetInterval
<Div id = "myDiv" style = "latar belakang-warna: lightblue; lebar: 0; tinggi: 20px; garis-ketinggian: 20px;"> 0%</div> <tombol id = "btn"> Jalankan </buttpal> <script> var timer; btn.onclick = function () {clearInderVal (timer); btn = function = function () {clearInterval (Timer); pydiv. setInterval (function () {if (parseInt (myDiv.style.width) <500) {myDiv.Style.width = parseInt (myDiv.Style.width) + 5 + 'px'; mydiv.innerHtml = ParseInt (myDiv.Style.width); } else {clearInterval (timer);}}, 16);} </script>【2】 SetTimeout
<Div id = "myDiv" style = "latar belakang-warna: lightblue; lebar: 0; tinggi: 20px; garis-line-height: 20px;"> 0%</div> <tombol id = "btn"> Jalankan </button> <script> var timer; btn.onclick = function () {cleartimeout (timer); myDiv.sth = function () {cleartimeout (Timer); myDiv.sth = function = 0; fn () {if (parseInt (myDiv.Style.width) <500) {myDiv.Style.width = parseInt (myDiv.Style.width) + 5 + 'px'; mydiv.innerhtml = parseInt (myDiv.Style.width)/5 +/5 +%;%; setTimeout (fn, 16);} else {clearTimeout (timer);}}, 16);} </script>【3】 RequestanimationFrame
<Div id = "myDiv" style = "latar belakang-warna: lightblue; lebar: 0; tinggi: 20px; garis-line-height: 20px;"> 0%</div> <tombol id = "btn"> Jalankan </button> <script> var timer; btn.onclick = function () {mydiv.style.width = '0; RequestanimationFrame (function fn () {if (parseInt (myDiv.Style.width) <500) {myDiv.Style.width = parseInt (myDiv.Style.width) + 5 + 'px'; myDiv.innerhtml = parseint (myDiv.sty. requestAnimationFrame (fn);} else {cancelAnimationFrame (timer);}});} </script>Oke, kode ada di sini untuk memperkenalkan aplikasi timer ketiga dalam seri BOM (jam, hitungan mundur, stopwatch dan jam alarm)
Di atas adalah timer requestanimationFrame kedua dari seri BOM yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!