requestAnimationFrame

JavaScript kursu · Orta seviye · Ders 63/134

Akıcı animasyonlar için requestAnimationFrame döngüsünü öğrenirsin.

requestAnimationFrame ile akıcı animasyon

requestAnimationFrame bir fonksiyonu bir sonraki yeniden çizimden hemen önce çağırır. Bu, akıcı animasyonlar için en doğru yoldur; tarayıcı her karede bir kez çağırır.

function animate() {
  console.log('Kare');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Animasyonun sürmesi için callback içinden requestAnimationFrame'i tekrar çağırırsın. Böylece her karede fonksiyon yeniden çalışır. Bu özyinelemeli yapı, setInterval'in aksine tarayıcının çizim ritmine uyar.

cancelAnimationFrame ile durdurma

Bir animasyonu durdurmak için cancelAnimationFrame(id) kullanırsın. requestAnimationFrame bir kimlik döndürür; bu kimliği saklayıp durdurma anında cancelAnimationFrame'e verirsin.

let id = requestAnimationFrame(animate);

cancelAnimationFrame(id);

Tıpkı clearInterval gibi, cancelAnimationFrame de henüz çağrılmamış bir kareyi iptal eder. Animasyonun artık gerekmediği durumlarda temizlik için kullanılır; aksi halde gereksiz kareler çizilmeye devam eder.

Uygulama Kutuyu sağa hareket ettir

Bir .box öğesini requestAnimationFrame ile sağa hareket ettir. Her karede left'i 2 artır ve box.style.left'e 'px' ile yaz.

Örnek çözümü göster

const box = document.querySelector('.box');
let left = 0;
function animate() {
  left = left + 2;
  box.style.left = left + 'px';
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Kendini test et

Animasyon için hangi API daha uygundur?
- setInterval her 16 ms'de
- setTimeout zinciri
- console.log döngüsü
- requestAnimationFrame
Cevabı göster

requestAnimationFrame — Doğru! requestAnimationFrame tarayıcının çizim ritmine uyar, bu yüzden animasyon en akıcı şekilde çalışır.

requestAnimationFrame çağrısını tamamla

function animate() {
  console.log('Kare');
  ____(animate);
}
requestAnimationFrame(animate);

Cevabı göster

function animate() {
  console.log('Kare');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Animasyon kavramlarını eşleştir

requestAnimationFrame

bir sonraki karede çağırır
cancelAnimationFrame

kareyi iptal eder
animate

her karede çalışan fonksiyon
id

karenin kimliğidir

requestAnimationFrame