Meydan okuma - Zamanlayıcı ve animasyon

setInterval ve requestAnimationFrame ile akıcı bir ilerleme çubuğu yazarsın.

İlerleme çubuğu animasyonu

Bu meydan okumada akıcı bir ilerleme çubuğu yazacaksın. Çubuğun değeri sıfırdan yüze kademeli olarak artar.

Bunun için requestAnimationFrame kullanırsın. Her karede çubuğun value özelliğini biraz artırırsın. Fonksiyon kendini tekrar çağırarak bir döngü oluşturur.

Yüze ulaşınca cancelAnimationFrame ile döngüyü durdurursun. Aksi halde animasyon sonsuza dek çalışır.

Animasyonu durdurma

requestAnimationFrame her çağrıldığında bir kare kimliği döndürür. Bu kimliği bir değişkende saklarsın; ileride durdurmak için gerekir.

Animasyonu durdurmak için cancelAnimationFrame(kimlik) çağırırsın. Buradaki kimlik, requestAnimationFrame'in döndürdüğü değerdir.

Kimliği saklamazsan durduramazsın; animasyon arka planda çalışmaya devam eder ve gereksiz yere bellek harcar. Hedefe ulaşınca hemen durdurmayı unutma.

Uygulama startProgress fonksiyonunu yaz

startProgress(bar) fonksiyonunu yaz. İçinde animate adında bir fonksiyon tanımla: her karede bar.value değerini 2 artır. bar.value >= 100 olunca cancelAnimationFrame(frameId) çağır ve dön. Değilse frameId = requestAnimationFrame(animate) ile bir sonraki kareyi iste. En sona frameId değişkenini tanımla ve ilk kareyi başlat.

Örnek çözümü göster

bar.value = bar.value + 2; yap, if (bar.value >= 100) { cancelAnimationFrame(frameId); return; } ekle, değilse frameId = requestAnimationFrame(animate); çağır. En sonda frameId = requestAnimationFrame(animate); ile başlat.

Örnek çözüm:
function startProgress(bar) {
  let frameId;
  function animate() {
    bar.value = bar.value + 2;
    if (bar.value >= 100) {
      cancelAnimationFrame(frameId);
      return;
    }
    frameId = requestAnimationFrame(animate);
  }
  frameId = requestAnimationFrame(animate);
}

Kendini test et

Animasyon karesini başlat

let frameId = ____;

Cevabı göster

let frameId = requestAnimationFrame(animate);

requestAnimationFrame ne zaman tercih edilir?
- Bir kerelik gecikme için
- Sabit aralıklarla tekrar eden iş için
- Metin biçimlendirme için
- Ekrana çizilen animasyon için
Cevabı göster

Ekrana çizilen animasyon için — Doğru. rAF tarayıcının çizim döngüsüyle senkron çalışır, akıcı animasyon verir.

Sıradaki ders: Meydan okuma - Modüler yapı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler