Animasi adalah salah satu elemen inti dari pengalaman web modern. Sebagai developer, kamu pasti pernah menghadapi tantangan membuat animasi yang halus dan efisien. Di sinilah requestAnimationFrame berperan — sebuah browser API yang telah merevolusi cara kita menangani animasi di JavaScript.

Di artikel ini, kita akan membahas apa itu requestAnimationFrame, bagaimana cara kerjanya, dan kenapa ini adalah solusi utama untuk membuat animasi yang benar-benar mulus.

Apa itu requestAnimationFrame?

requestAnimationFrame adalah method yang disediakan browser untuk menjadwalkan pembaruan animasi. Berbeda dengan setInterval atau setTimeout, method ini menyinkronkan animasimu dengan refresh rate layar, biasanya 60 frames per second (fps) di sebagian besar monitor. Sinkronisasi ini memastikan animasi yang lebih mulus dan performa yang lebih baik.

Sintaks:

window.requestAnimationFrame(callback);

• callback: Fungsi yang akan dipanggil untuk memperbarui animasi.

Kenapa Pakai requestAnimationFrame?

1. Optimasi Performa
   Browser mengoptimalkan animasi dengan memastikan pembaruan hanya terjadi saat layar siap melakukan repaint. Ini mengurangi kalkulasi yang tidak perlu dan menghemat baterai perangkat.

2. Konsisten dengan Frame Rate
   Method ini menyesuaikan diri dengan refresh rate layar. Jika layar berjalan di 60 fps, requestAnimationFrame memanggil animasimu di 60 fps. Jika refresh rate turun, API ini otomatis menyesuaikan.

3. Otomatis Berhenti di Tab yang Tidak Aktif
   Ketika sebuah tab tidak aktif, requestAnimationFrame menghentikan eksekusinya untuk menghemat resource — berbeda dengan setInterval atau setTimeout yang terus berjalan di background.

Bagaimana Cara Kerjanya?

Untuk membuat animasi menggunakan requestAnimationFrame, ikuti langkah-langkah berikut:

1. Definisikan Fungsi Animasi
   Fungsi ini akan memperbarui properti dari elemen yang ingin kamu animasikan.

2. Panggil requestAnimationFrame
   Gunakan requestAnimationFrame di dalam fungsi animasimu untuk memanggilnya secara rekursif, sehingga membentuk sebuah loop.

3. Hentikan Animasi
   Gunakan kondisi tertentu untuk menghentikan animasi ketika sudah selesai.

Contoh: Animasi Bola Sederhana

Berikut cara menganimasikan bola yang bergerak melintasi layar menggunakan requestAnimationFrame:

// Setup awal
const ball = document.getElementById("ball");
let position = 0;
const maxPosition = window.innerWidth - ball.offsetWidth;

// Fungsi animasi
function animate() {
  position += 5; // Gerakkan bola ke kanan
  ball.style.transform = `translateX(${position}px)`;

  // Hentikan animasi saat mencapai tepi
  if (position < maxPosition) {
    requestAnimationFrame(animate);
  }
}

// Mulai animasi
requestAnimationFrame(animate);

HTML:

<div
  id="ball"
  style="width: 50px; height: 50px; background: red; border-radius: 50%; position: absolute;"
></div>

Tips Penggunaan yang Efektif

1. Jaga Animasi Tetap Ringan
   Minimalkan beban kerja di dalam fungsi animasimu. Kalkulasi yang kompleks atau manipulasi DOM yang berlebihan bisa menghambat performa.

2. Kombinasikan dengan CSS Transitions atau Transformations
   Gunakan properti seperti transform dan opacity untuk animasi yang lebih halus, karena keduanya diakselerasi oleh GPU.

3. Batalkan Animasi dengan cancelAnimationFrame
   Gunakan ID yang dikembalikan oleh requestAnimationFrame untuk membatalkan animasi yang sedang berjalan:

   const animationId = requestAnimationFrame(animate);
   cancelAnimationFrame(animationId);

4. Gunakan performance.now untuk Timing
   Lacak waktu yang telah berlalu secara akurat untuk animasi yang lebih kompleks:

   let start = null;
   
   function step(timestamp) {
     if (!start) start = timestamp;
     const progress = timestamp - start;
   
     ball.style.transform = `translateX(${Math.min(progress / 5, maxPosition)}px)`;
   
     if (progress < maxPosition * 5) {
       requestAnimationFrame(step);
     }
   }
   
   requestAnimationFrame(step);

Kapan Sebaiknya Tidak Menggunakan requestAnimationFrame

Meskipun requestAnimationFrame sangat bagus untuk sebagian besar animasi, ada kalanya CSS animations atau Web Animations API lebih cocok digunakan — khususnya untuk animasi sederhana yang bersifat deklaratif.

Kesimpulan

requestAnimationFrame adalah alat yang powerful untuk membuat animasi yang halus dan efisien di JavaScript. Dengan menyelaraskan pembaruan terhadap siklus rendering browser, method ini memastikan performa optimal dan pengalaman pengguna yang lebih baik.

Jadi, lain kali kamu butuh animasi, tinggalkan setInterval dan beralih ke requestAnimationFrame — penggunamu (dan perangkat mereka) pasti akan berterima kasih!