gacor: Jadwalkan pembaruan visual dengan requestAnimationFrame

Pengatur waktu tidak mengetahui kapan browser akan melukis. requestAnimationFrame menjadwalkan callback sebelum frame berikutnya, sehingga lebih cocok untuk pembaruan visual seperti memindahkan elemen atau menggambar di kanvas.

let frameId;
let start;

function animate(now) {
  start ??= now;
  const progress = Math.min((now - start) / 400, 1);
  element.style.transform = `translateX(${progress * 120}px)`;
  if (progress < 1) frameId = requestAnimationFrame(animate);
}

frameId = requestAnimationFrame(animate);

Gunakan stempel waktu, bukan langkah tetap

• Dasarkan kemajuan pada stempel waktu panggilan balik sehingga gerakan tidak terikat pada kecepatan refresh tertentu.
• Jaga pembacaan dan penulisan tata letak tetap teratur untuk menghindari tata letak paksa yang berulang.
• Batalkan frame terjadwal dengan cancelAnimationFrame saat animasi harus berhenti.

Hormati preferensi gerakan pengguna

Tawarkan jalur pengurangan gerakan untuk gerakan yang tidak penting dan hindari menganimasikan konten yang dapat mengganggu atau membuat halaman tidak nyaman.

Uji pada kecepatan refresh yang berbeda dan saat tab berada di latar belakang. Browser dapat menjeda atau membatasi callback animasi saat halaman tidak terlihat.