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.