Animasi dengan requestAnimationFrame

requestAnimationFrame (rAF) menjadwalkan callback sebelum pengecatan ulang peramban berikutnya, sehingga animasi tersinkronisasi dengan laju penyegaran tampilan (biasanya 60 FPS). Berbeda dengan setInterval, rAF berhenti sementara saat tab disembunyikan, sehingga menghemat CPU dan baterai.

Perulangan rAF: tentukan fungsi animasi yang menggambar bingkai saat ini, lalu panggil requestAnimationFrame(animate) untuk menjadwalkan bingkai berikutnya. Peramban memanggil animate sebelum setiap pengecatan ulang, sehingga menghasilkan animasi berkelanjutan pada laju bingkai tampilan.

rAF meneruskan stempel waktu DOM berpresisi tinggi (milidetik sejak halaman dimuat) ke callback. Gunakan untuk menghitung gerakan yang tidak bergantung pada laju bingkai: delta = timestamp - lastTimestamp. Kalikan kecepatan dengan delta agar jarak yang ditempuh per detik tetap sama, terlepas dari laju bingkai.

Hitung waktu yang berlalu sejak bingkai terakhir dan sesuaikan gerakan berdasarkan waktu tersebut. Objek yang bergerak dengan kecepatan 100px/detik menempuh 100 * (delta / 1000) piksel per bingkai. Hal ini memastikan fisika yang konsisten pada tampilan 30 FPS dan 144 FPS.

rAF mengembalikan sebuah penanda. Batalkan dengan cancelAnimationFrame(handle). Simpan penanda tersebut dalam variabel, periksa penanda berjalan di dalam perulangan, atau batalkan saat pembersihan komponen. Selalu batalkan perulangan saat elemen dihapus dari DOM.

Di setiap bingkai: (1) clearRect seluruh kanvas, (2) perbarui variabel status (posisi, sudut, waktu), (3) gambar semua objek pada posisi baru, (4) panggil requestAnimationFrame untuk bingkai berikutnya. Jangan pernah melewatkan clearRect — bingkai lama akan menumpuk sebagai jejak.

Gunakan transisi dan animasi CSS untuk animasi sederhana berbasis properti (efek saat diarahkan, kemunculan modal dari samping). Gunakan rAF untuk animasi kompleks dan interaktif — perulangan permainan, simulasi fisika, dan perenderan kanvas — saat Anda memerlukan kontrol terperinci atas setiap bingkai.

Untuk adegan kompleks, gambar terlebih dahulu pada kanvas di luar layar, lalu gunakan drawImage untuk menggambarnya ke kanvas yang terlihat dalam satu operasi. Hal ini mencegah kedipan karena bingkai yang belum selesai digambar tidak pernah ditampilkan — kanvas yang terlihat diperbarui secara atomik di setiap bingkai.

Batasi ke laju bingkai yang lebih rendah (misalnya, 30 FPS): periksa apakah waktu yang cukup telah berlalu sejak penggambaran terakhir sebelum merender. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Jadwalkan rAF tanpa memedulikan hasil pemeriksaan agar responsivitas tetap terjaga.

Panel Performance di Chrome DevTools merekam callback rAF dalam bagan api JS. Cari callback panjang yang melebihi 16 md — callback tersebut menyebabkan bingkai terlewat. Gunakan pengukur FPS (Perenderan → Pengukur FPS) untuk mengamati laju bingkai secara waktu nyata selama interaksi.

Untuk animasi deklaratif yang lebih sederhana tanpa pengaturan waktu manual: element.animate(keyframes, options). WAAPI menangani fungsi waktu, mode pengisian, dan iterasi — sehingga perhitungan bingkai dialihkan ke peramban. Gunakan rAF untuk logika perenderan khusus yang tidak dapat dinyatakan oleh WAAPI.

requestAnimationFrame menyinkronkan animasi JavaScript dengan laju penyegaran tampilan dan berhenti sementara pada tab yang tersembunyi. Parameter stempel waktu memungkinkan gerakan yang tidak bergantung pada laju bingkai melalui penskalaan berdasarkan waktu delta. Pola perulangan animasi kanvas (hapus, perbarui, gambar, jadwalkan) yang dipadukan dengan cancelAnimationFrame untuk pembersihan menjadi dasar animasi web yang halus dan efisien.