Eksplorasi HTML5: Mengoptimalkan Animasi Web dengan requestAnimationFrame

Dalam program animasi browser, kita biasanya menggunakan pengatur waktu untuk memutar objek target setiap beberapa milidetik untuk membuatnya bergerak. Sekarang kabar baiknya adalah pengembang browser telah memutuskan: hei, mengapa kita tidak menyediakan API seperti itu di browser sehingga kita dapat mengoptimalkan animasinya untuk pengguna. Oleh karena itu, fungsi requestAnimationFrame() ini adalah API untuk efek animasi. Anda dapat menggunakannya untuk perubahan gaya pada DOM atau animasi kanvas atau WebGL.

Browser dapat mengoptimalkan tindakan animasi paralel, mengatur ulang urutan tindakan dengan lebih wajar, dan menyelesaikan tindakan yang dapat digabungkan dalam satu siklus rendering, sehingga menghadirkan efek animasi yang lebih halus. Misalnya, melalui requestAnimationFrame(), animasi JS dapat terjadi secara bersamaan dengan animasi/transformasi CSS atau animasi SVG SMIL. Selain itu, jika Anda menjalankan animasi di tab browser, browser akan menjedanya saat tab tersebut tidak terlihat, sehingga mengurangi tekanan pada CPU dan memori serta menghemat daya baterai.

 // lapisan shim dengan setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000/60); };} )();// penggunaan:// alih-alih setInterval(render, 16) ....(function animloop(){ requestAnimFrame(animloop); render();})();// letakkan rAF *sebelum* render() untuk memastikan sedekat // 60fps dengan fallback setTimeout.

Enkapsulasi requestAnimationFrame yang lebih andal

Teknisi browser Opera Erik Möller merangkum fungsi ini agar lebih kompatibel dengan berbagai browser. Anda dapat membaca artikel ini, tetapi pada dasarnya kodenya memutuskan apakah akan menggunakan penundaan 4 ms atau 16 ms agar sesuai dengan 60fps. Di bawah ini adalah kode ini, Anda dapat menggunakannya, tetapi harap dicatat bahwa kode ini menggunakan fungsi standar, dan saya telah menambahkan awalan yang kompatibel dengan berbagai mesin browser.

 (fungsi() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendor[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = jendela[vendor[x]+'CancelAnimationFrame'] ||. window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, elemen) { var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { panggilan balik(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; kembalikan id; jika (!window.cancelAnimationFrame) window.cancelAnimationFrame = fungsi(id) { clearTimeout(id);

Biarkan saya melihat efek penggunaan requestAnimationFrame

 window.requestAnimationFrame(fungsi(/* waktu */ waktu){ // waktu ~= +Tanggal baru // waktu unix});

Parameter dalam fungsi panggilan balik dapat diteruskan tepat waktu.

Dukungan berbagai browser untuk requestAnimationFrame

Google Chrome, Firefox, dan IE10+ semuanya mengimplementasikan fungsi ini. Meskipun browser Anda sudah sangat tua, enkapsulasi requestAnimationFrame di atas dapat membuat metode ini bebas kesalahan di IE8/9.