HTML Academy · Pelajaran

Animasi dengan requestAnimationFrame

Bina animasi canvas yang lancar dengan gelung bingkai animasi

Pelajaran 4 daripada 413 langkah

Animasi dengan requestAnimationFrame ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Mengapa requestAnimationFrame?

requestAnimationFrame (rAF) menjadualkan panggilan balik sebelum pelukisan semula pelayar yang seterusnya, lalu menyegerakkan animasi dengan kadar segar semula paparan (biasanya 60fps). Tidak seperti setInterval, rAF berhenti seketika apabila tab disembunyikan, sekali gus menjimatkan CPU dan bateri.

Gelung Animasi Asas

Gelung rAF: tentukan fungsi animate yang melukis bingkai semasa, kemudian panggil requestAnimationFrame(animate) untuk menjadualkan bingkai seterusnya. Pelayar memanggil animate sebelum setiap pelukisan semula, lalu menghasilkan animasi berterusan pada kadar bingkai paparan.

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw frame at current state
  draw(timestamp);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Parameter cap waktu

rAF menghantar cap waktu beresolusi tinggi DOM, dalam milisaat sejak halaman dimuatkan, kepada panggilan balik. Gunakannya untuk mengira pergerakan yang tidak bergantung pada kadar bingkai: delta = timestamp - lastTimestamp. Darabkan halaju dengan delta supaya jarak yang sama ditempuh setiap saat tanpa mengira kadar bingkai.

Pergerakan Tidak Bergantung pada Kadar Bingkai

Kira masa yang berlalu sejak bingkai terakhir dan skalakan pergerakan dengan sewajarnya. Objek yang bergerak pada 100px/s bergerak sejauh 100 * (delta / 1000) piksel bagi setiap bingkai. Ini memastikan fizik yang konsisten pada paparan 30fps dan 144fps.

Menghentikan Animasi

rAF mengembalikan pemegang. Batalkan dengan cancelAnimationFrame(handle). Simpan pemegang dalam pemboleh ubah, semak bendera running dalam gelung atau batalkan semasa pembersihan komponen. Sentiasa batalkan gelung apabila elemen dialih keluar daripada DOM.

Corak Animasi Kanvas

Setiap bingkai: (1) clearRect seluruh kanvas, (2) kemas kini pemboleh ubah keadaan (kedudukan, sudut, masa), (3) lukis semua objek pada kedudukan baharu, (4) panggil requestAnimationFrame untuk bingkai seterusnya. Jangan sesekali abaikan clearRect — bingkai lama akan terkumpul sebagai jejak.

Peralihan CSS berbanding rAF

Gunakan peralihan dan animasi CSS untuk animasi mudah berasaskan sifat (kesan apabila dituding, gelongsoran masuk modal). Gunakan rAF untuk animasi kompleks dan interaktif — gelung permainan, simulasi fizik dan pemaparan kanvas — apabila anda memerlukan kawalan terperinci bagi setiap bingkai.

Penyanggaan Berganda pada Kanvas

Untuk adegan kompleks, lukis pada kanvas luar skrin terlebih dahulu, kemudian gunakan drawImage untuk melukisnya pada kanvas yang kelihatan dalam satu operasi. Ini menghalang kelipan kerana bingkai yang dilukis separa tidak pernah dipaparkan — kanvas yang kelihatan dikemas kini secara atomik pada setiap bingkai.

Mengehadkan kepada FPS Sasaran

Hadkan kepada kadar bingkai yang lebih rendah (contohnya, 30fps): semak sama ada masa yang mencukupi telah berlalu sejak lukisan terakhir sebelum memaparkan. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Jadualkan rAF tanpa mengira keadaan untuk mengekalkan responsif.

Menyahpepijat Animasi

Panel Performance dalam Chrome DevTools merekodkan panggilan balik rAF dalam carta nyalaan JS. Cari panggilan balik panjang yang melebihi 16ms — ia menyebabkan bingkai tercicir. Gunakan meter FPS (Rendering → FPS Meter) untuk memerhatikan kadar bingkai masa nyata semasa interaksi.

Alternatif Web Animations API

Untuk animasi deklaratif yang lebih mudah tanpa pemasaan manual: element.animate(keyframes, options). WAAPI mengendalikan fungsi pemasaan, mod pengisian dan lelaran — pengiraan bingkai diserahkan kepada pelayar. Gunakan rAF untuk logik pemaparan tersuai yang tidak dapat dinyatakan oleh WAAPI.

Semakan Pengetahuan

Mengapakah halaju animasi perlu didarab dengan masa delta dalam gelung requestAnimationFrame?

Jawab dalam pelajaran interaktif

Ringkasan

requestAnimationFrame menyegerakkan animasi JavaScript dengan kadar segar semula paparan dan berhenti seketika pada tab tersembunyi. Parameter cap waktu membolehkan pergerakan yang tidak bergantung pada kadar bingkai melalui penskalaan masa delta. Corak gelung animasi kanvas (kosongkan, kemas kini, lukis, jadualkan), bersama-sama cancelAnimationFrame untuk pembersihan, membentuk asas animasi web yang lancar dan cekap.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Animasi dengan requestAnimationFrame” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Animasi dengan requestAnimationFrame”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Animasi dengan requestAnimationFrame”?

Bina animasi canvas yang lancar dengan gelung bingkai animasi Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Animasi dengan requestAnimationFrame” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy