HTML Academy · Ders

requestAnimationFrame ile Animasyon

Animasyon karesi döngüsüyle akıcı canvas animasyonları oluşturun

requestAnimationFrame ile Animasyon, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

requestAnimationFrame neden kullanılır

requestAnimationFrame (rAF), bir sonraki tarayıcı yeniden çiziminden önce çalışacak bir geri çağırma işlevi planlar ve animasyonu ekranın yenileme hızıyla eşzamanlar (genellikle 60 FPS). setInterval'ın aksine rAF, sekme gizlendiğinde duraklar; böylece CPU ve pil tasarrufu sağlar.

Temel Animasyon Döngüsü

Bir rAF döngüsü için geçerli kareyi çizen bir animate işlevi tanımlayın, ardından bir sonrakini planlamak üzere requestAnimationFrame(animate) çağrısını yapın. Tarayıcı, her yeniden çizimden önce animate işlevini çağırarak ekranın kare hızında sürekli bir animasyon oluşturur.

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw frame at current state
  draw(timestamp);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Zaman Damgası Parametresi

rAF, sayfa yüklenmesinden bu yana geçen milisaniyeleri içeren yüksek çözünürlüklü bir zaman damgasını geri çağırma işlevine aktarır. Kare hızından bağımsız hareket hesaplamak için bunu kullanın: delta = timestamp - lastTimestamp. Kare hızı ne olursa olsun saniyede aynı mesafeyi kat etmek için hızı delta ile çarpın.

Kare Hızından Bağımsız Hareket

Son kareden bu yana geçen süreyi hesaplayın ve hareketi buna göre ölçekleyin. 100 piksel/s hızla hareket eden bir nesne, kare başına 100 * (delta / 1000) piksel ilerler. Bu, 30 FPS ve 144 FPS ekranlarda fiziğin tutarlı olmasını sağlar.

Animasyonu Durdurma

rAF bir tanıtıcı döndürür. cancelAnimationFrame(handle) ile iptal edin. Tanıtıcıyı bir değişkende saklayın, döngünün içinde bir çalışıyor bayrağını denetleyin veya bileşen temizlendiğinde iptal edin. Öğe DOM'dan kaldırıldığında döngüleri her zaman iptal edin.

Tuval Animasyonu Deseni

Her karede: (1) tuvalin tamamını clearRect ile temizleyin, (2) durum değişkenlerini (konum, açı, zaman) güncelleyin, (3) tüm nesneleri yeni konumlarında çizin, (4) sonraki kare için requestAnimationFrame çağrısını yapın. clearRect işlemini asla atlamayın — eski kareler bir iz olarak birikir.

CSS Geçişleri ve rAF

Basit, özellik tabanlı animasyonlar (üzerine gelme efektleri, iletişim penceresinin kayarak girişi) için CSS geçişlerini ve animasyonlarını kullanın. Her kare üzerinde ayrıntılı denetim gerektiren karmaşık, etkileşimli animasyonlar — oyun döngüleri, fizik benzetimleri, tuval oluşturma — için rAF kullanın.

Tuvalda Çift Arabellekleme

Karmaşık sahnelerde önce ekran dışı bir tuvale çizin, ardından drawImage ile bunu tek bir işlemde görünür tuvalin üzerine çizin. Bu, kısmen çizilmiş bir karenin gösterilmesini engelleyerek titremeyi önler — görünür tuval her karede atomik olarak güncellenir.

Hedef FPS'ye Sınırlama

Daha düşük bir kare hızıyla sınırlayın (ör. 30 FPS): oluşturma işleminden önce son çizimden bu yana yeterli zaman geçip geçmediğini denetleyin. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Duyarlılığı korumak için rAF'ı yine de planlayın.

Animasyon Hatalarını Ayıklama

Chrome DevTools Performance paneli, JS alev grafiğinde rAF geri çağırmalarını kaydeder. 16 ms'yi aşan uzun geri çağırmaları arayın — bunlar karelerin atlanmasına neden olur. Etkileşim sırasında gerçek zamanlı kare hızını gözlemlemek için FPS ölçeri (Oluşturma → FPS Meter) kullanın.

Web Animasyonları API'si Alternatifi

Elle zamanlama yapmadan daha basit, bildirimsel animasyonlar için: element.animate(keyframes, options). WAAPI, zamanlama işlevlerini, doldurma kiplerini ve yinelemeleri yöneterek kare hesaplamasını tarayıcıya bırakır. WAAPI'nin ifade edemediği özel oluşturma mantığı için rAF kullanın.

Bilginizi Sınayın

Bir requestAnimationFrame döngüsünde animasyon hızının delta zamanıyla çarpılması neden gerekir?

Özet

requestAnimationFrame, JavaScript animasyonunu ekranın yenileme hızıyla eşzamanlar ve gizli sekmelerde duraklar. Zaman damgası parametresi, delta zaman ölçeklendirmesiyle kare hızından bağımsız hareket sağlar. Tuval animasyonu döngüsü deseni (temizle, güncelle, çiz, planla) ile temizleme için cancelAnimationFrame'ın birlikte kullanılması, akıcı ve verimli web animasyonlarının temelini oluşturur.

Sıkça Sorulan Sorular

“requestAnimationFrame ile Animasyon” dersi ücretsiz mi?

Evet — “requestAnimationFrame ile Animasyon” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“requestAnimationFrame ile Animasyon” dersinde ne öğreneceğim?

Animasyon karesi döngüsüyle akıcı canvas animasyonları oluşturun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“requestAnimationFrame ile Animasyon” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön