JavaScript Academy · Ders

requestAnimationFrame ile Animasyon

Akıcı canvas animasyonları oluşturun.

requestAnimationFrame ile Animasyon, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

requestAnimationFrame Neden Kullanılır?

requestAnimationFrame(callback), çizim işlevinizin bir sonraki ekran yenilemesinden önce çalışmasını planlar; bu genellikle saniyede 60 kez gerçekleşir. setInterval yönteminin aksine arka plandaki sekmelerde duraklayarak CPU ve pil tasarrufu sağlar.

function frame() {
  // draw one frame
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Temel Döngü

Bir animasyon döngüsü canvas'ı temizler, durumu günceller, çizim yapar ve ardından kendisini yeniden planlar.

let x = 0;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  x += 2;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Her Kareyi Temizleme

clearRect kullanılmadığında önceki kare çizili kalır ve izler oluşur. Temiz bir yeniden çizim için her karenin başında tüm tamponu temizleyin.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Zaman Damgası Argümanı

Geri çağrım, yüksek çözünürlüklü bir zaman damgası (milisaniye) alır. Kareler arasındaki geçen süreyi hesaplamak için bunu kullanın.

let last = 0;
function loop(now) {
  const dt = now - last;
  last = now;
  // dt = ms since previous frame
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

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

Hareket hızının kare hızından bağımsız olarak tutarlı olması için hızı delta zamanıyla çarpın.

let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
  const dt = now - (loop.last || now);
  loop.last = now;
  x += speed * dt;
  requestAnimationFrame(loop);
}

Topu Zıplatma

Nesnenin bir kenara çarptığında zıplamasını sağlamak için hızını tersine çevirin.

let x = 50, vx = 3;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  if (x < 0 || x > canvas.width) vx = -vx;
  ctx.beginPath();
  ctx.arc(x, 75, 15, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(loop);
}
loop();

Döngüyü Durdurma

requestAnimationFrame bir kimlik döndürür. Animasyonu durdurmak için bu kimliği cancelAnimationFrame öğesine geçirin.

let id;
function loop() {
  id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);

Duraklatma ve Devam Ettirme

Bir running bayrağını izleyin. Devam ettirmek için yeni bir kare isteyin; duraklatmak için yeni kare istemeyi bırakın veya bekleyen kareyi iptal edin.

let running = true;
function loop() {
  if (!running) return;
  // draw...
  requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }

Birden Çok Nesneyi Canlandırma

Nesneleri bir dizi içinde saklayın ve döngünün içinde her birini güncelleyin.

const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of balls) {
    b.x += b.vx;
    ctx.fillRect(b.x, 60, 20, 20);
  }
  requestAnimationFrame(loop);
}
loop();

Akıcı Hareket için Yumuşatma

Doğal bir yavaşlama elde etmek için yumuşatma kullanarak bir hedefe doğru ara değer hesaplayın.

let x = 0;
const target = 200;
function loop() {
  x += (target - x) * 0.1; // ease out
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();

Performans İpuçları

Döngünün içinde nesne ayırmaktan kaçının, çizim çağrılarını toplu hâle getirin ve mümkün olduğunda yalnızca değişen bölümleri yeniden çizin. 60 fps için yaklaşık 16 ms olan bütçeyi aşmamak üzere kare başına yapılan işi küçük tutun.

Kısa Kontrol

Animasyon bilginizi sınayın.

Özet: Animasyon

requestAnimationFrame ile animasyon döngüleri oluşturdunuz, her kareyi clearRect ile temizlediniz, kare hızından bağımsızlık için zaman damgasını kullandınız, zıplayan topları ve birden çok nesneyi canlandırdınız, yumuşatma uyguladınız ve cancelAnimationFrame ile durdurmayı ve duraklatmayı öğrendiniz.

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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

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

Akıcı canvas animasyonları oluşturun. JavaScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön