JavaScript Academy · Lektion

Animation mit requestAnimationFrame

Erstellen Sie flüssige Canvas-Animationen.

Animation mit requestAnimationFrame ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum requestAnimationFrame?

requestAnimationFrame(callback) plant Ihre Zeichenfunktion für die Zeit vor der nächsten Bildschirmaktualisierung ein – normalerweise 60-mal pro Sekunde. In Hintergrund-Tabs wird die Funktion im Gegensatz zu setInterval pausiert, wodurch CPU und Akku geschont werden.

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

Die grundlegende Schleife

Eine Animationsschleife löscht den Canvas, aktualisiert den Zustand, zeichnet und plant sich anschließend erneut ein.

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);

Jeden Frame löschen

Ohne clearRect bleibt der vorherige Frame gezeichnet und es entstehen Spuren. Löschen Sie zu Beginn jedes Frames den gesamten Puffer, um sauber neu zu zeichnen.

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

Das Zeitstempel-Argument

Der Callback erhält einen hochauflösenden Zeitstempel (in Millisekunden). Verwenden Sie ihn, um die verstrichene Zeit zwischen Frames zu berechnen.

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

Bildratenunabhängige Bewegung

Multiplizieren Sie die Geschwindigkeit mit der Delta-Zeit, damit die Bewegung unabhängig von der Bildrate gleich schnell bleibt.

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);
}

Einen Ball abprallen lassen

Kehren Sie die Geschwindigkeit um, wenn das Objekt einen Rand erreicht, damit es abprallt.

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();

Die Schleife stoppen

requestAnimationFrame gibt eine ID zurück. Übergeben Sie sie an cancelAnimationFrame, um die Animation zu stoppen.

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

Pausieren und fortsetzen

Verfolgen Sie ein Flag, das angibt, ob die Animation läuft. Fordern Sie zum Fortsetzen einen neuen Frame an. Zum Pausieren stellen Sie einfach keine weiteren Anfragen oder brechen Sie die ausstehende Anfrage ab.

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

Mehrere Objekte animieren

Speichern Sie die Objekte in einem Array und aktualisieren Sie jedes davon innerhalb der Schleife.

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();

Easing für flüssige Bewegungen

Interpolieren Sie mit Easing in Richtung eines Ziels, um ein natürliches Abbremsen zu erzielen.

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();

Tipps zur Performance

Vermeiden Sie es, innerhalb der Schleife Objekte zu erzeugen, bündeln Sie Zeichenaufrufe und zeichnen Sie nach Möglichkeit nur neu, was sich geändert hat. Halten Sie die Arbeit pro Frame gering, damit Sie das Budget von etwa 16 ms für 60 fps einhalten.

Kurztest

Testen Sie Ihr Wissen über Animationen.

Rückblick: Animation

Sie haben Animationsschleifen mit requestAnimationFrame erstellt, jeden Frame mit clearRect gelöscht, den Zeitstempel für Bildratenunabhängigkeit verwendet, abprallende Bälle und mehrere Objekte animiert, Easing eingesetzt und gelernt, Animationen mit cancelAnimationFrame zu stoppen oder zu pausieren.

Häufig gestellte Fragen

Ist die Lektion „Animation mit requestAnimationFrame“ kostenlos?

Ja — der vollständige Text von „Animation mit requestAnimationFrame“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Animation mit requestAnimationFrame“?

Erstellen Sie flüssige Canvas-Animationen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Animation mit requestAnimationFrame“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy