Animation &
Interaktion

Bewegte Formen programmieren — von der Game-Loop über Transformationen bis zur Event-gesteuerten Interaktion mit dem Canvas-Element.

Informatik · Klasse 12 · 60 Minuten

Modul 01

Grundlagen der Animation

Animation ist die schnelle Abfolge leicht veränderter Bilder, die für das menschliche Auge den Eindruck von Bewegung erzeugt. In der Informatik steuern wir diesen Prozess algorithmisch — Frame für Frame.

Die Game-Loop

Das Herzstück jeder Animation: ein sich wiederholender Zyklus aus Update → Render.

↓ Details anzeigen

Die Game-Loop (oder Animations-Loop) ruft sich selbst rekursiv auf — in JavaScript mit requestAnimationFrame(). Pro Durchlauf werden Positionen, Geschwindigkeiten und Zustände aktualisiert (Update-Phase), anschließend wird der aktuelle Frame gezeichnet (Render-Phase). Der Browser synchronisiert die Loop mit der Bildschirm-Refreshrate (~60 FPS), was ruckelfreie Animationen ermöglicht. Im Gegensatz zu setInterval() pausiert requestAnimationFrame() automatisch bei inaktiven Tabs — das spart Ressourcen.

Frames & FPS

60 Bilder pro Sekunde — warum genau diese Zahl?

↓ Details anzeigen

Monitore aktualisieren typischerweise mit 60 Hz — also 60 Mal pro Sekunde. Jeder Frame hat ein Zeitbudget von ca. 16,67 ms. Reicht die Rechenzeit nicht aus, werden Frames übersprungen (Frame-Drop), und die Animation ruckelt. Die Wahrnehmungsschwelle für flüssige Bewegung liegt bei ca. 24 FPS (Kino), aber für interaktive Anwendungen sind 60 FPS der Standard, weil Eingabeverzögerung (Input-Lag) sonst spürbar wird.

Canvas-API

Das HTML5-Canvas-Element als programmierbares Zeichenbrett.

↓ Details anzeigen

Das <canvas>-Element stellt eine Pixel-basierte Zeichenfläche bereit. Über den 2D-Rendering-Kontext (getContext('2d')) zeichnen wir Formen, Pfade, Text und Bilder. Wichtig: Canvas hat kein DOM — jedes gezeichnete Objekt muss pro Frame neu gerendert werden (Immediate-Mode-Rendering). Das unterscheidet Canvas von SVG, das ein Retained-Mode-Modell nutzt. Für performante Animationen ist Canvas ideal, da der Zeichenpuffer direkt über die GPU angesteuert werden kann.

Delta-Time

Zeitbasierte vs. framebasierte Bewegung — ein kritischer Unterschied.

↓ Details anzeigen

Wenn Geschwindigkeit als x += 5 pro Frame berechnet wird, hängt die Bewegungsrate von der Framerate ab — auf einem langsamen Gerät bewegt sich das Objekt langsamer. Die Lösung: Delta-Time. requestAnimationFrame liefert einen Zeitstempel; die Differenz zum vorherigen Frame (deltaTime) wird als Faktor multipliziert: x += speed * deltaTime. So ist die Bewegung unabhängig von der Framerate — ein Grundprinzip professioneller Game-Engines.

Der Animations-Zyklus

Init
→
Update
→
Clear
→
Draw
→
rAF ↻

rAF = requestAnimationFrame — ruft die Loop erneut auf

Live-Demo — Bouncing Ball

Modul 02

Transformationen & Interaktion

Durch Transformationen (Translate, Rotate, Scale) und Event-Listener machen wir Animationen dynamisch und reaktiv — der Nutzer wird zum Akteur.

CSS-Animationen

  • Deklarativ: @keyframes + transition
  • GPU-beschleunigt für transform & opacity
  • Ideal für UI-Übergänge (Hover, Fade)
  • Begrenzte Logik — kein Zustandsmanagement
  • Vom Browser optimiert (Compositing)

Canvas/JS-Animationen

  • Imperativ: Frame-für-Frame-Rendering
  • Volle Kontrolle über Physik & Logik
  • Ideal für Spiele, Simulationen, Datenvisualisierung
  • Beliebig komplexes Zustandsmanagement
  • CPU-intensiver, erfordert manuelle Optimierung

Minimale Animation in JavaScript

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let x = 50, speed = 200; // 200 Pixel pro Sekunde
let lastTime = 0;

function animate(timestamp) {
  const dt = (timestamp - lastTime) / 1000;
  lastTime = timestamp;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += speed * dt; // zeitbasierte Bewegung
  if (x > canvas.width) x = 0;

  ctx.beginPath();
  ctx.arc(x, 150, 20, 0, Math.PI * 2);
  ctx.fillStyle = '#E63946';
  ctx.fill();

  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
Interaktive Demo — Mausgesteuerte Partikel

Bewege die Maus / tippe auf das Canvas — Partikel folgen deiner Bewegung.

Canvas-Transformationen

Der 2D-Kontext nutzt eine Transformationsmatrix. Drei Grundoperationen verändern das Koordinatensystem:

translate(x, y)

Verschiebt den Ursprung des Koordinatensystems.

↓ Details

Statt jedes Objekt relativ zu (0,0) zu positionieren, verschieben wir den Nullpunkt an die gewünschte Stelle. Das vereinfacht Rotation um den Mittelpunkt: erst translate zum Zentrum, dann rotate, dann Zeichnen relativ zu (0,0). Wichtig: save() und restore() sichern und stellen den Transformationszustand wieder her.

rotate(winkel)

Dreht das Koordinatensystem um den aktuellen Ursprung.

↓ Details

Der Winkel wird in Radiant angegeben (Grad × π/180). Ohne vorheriges translate rotiert alles um (0,0) — also die obere linke Ecke. Typisches Muster: translate(cx, cy) → rotate(angle) → zeichnen bei (-w/2, -h/2). So dreht sich das Objekt um seinen eigenen Mittelpunkt.

scale(sx, sy)

Skaliert alle nachfolgenden Zeichenoperationen.

↓ Details

Werte > 1 vergrößern, Werte < 1 verkleinern. Negative Werte spiegeln die Achse. scale(1, -1) invertiert die Y-Achse — nützlich, um ein mathematisches Koordinatensystem (Y nach oben) zu simulieren. Achtung: Scale beeinflusst auch Linienstärken!

Live-Demo — Transformationen

Modul 03

Interaktive Aufgaben

Teste dein Verständnis der Konzepte durch praktische Übungen.

Aufgabe 1: Sortiere die Animation-Loop

Bringe die Schritte einer typischen Animation-Loop in die richtige Reihenfolge.

☰ Canvas mit clearRect() leeren
☰ requestAnimationFrame() aufrufen
☰ Zeitstempel empfangen & deltaTime berechnen
☰ Formen mit neuen Positionen zeichnen (draw)
☰ Positionen & Geschwindigkeiten aktualisieren (update)

Aufgabe 2: Erklärungstext

Aufgabe 3: Code-Experiment

Verändere die Parameter im Editor und beobachte die Auswirkung in Echtzeit. Kannst du die Farbe, Geschwindigkeit und Größe des Kreises ändern?

✎ Code editieren

Modul 04

Wissens-Quiz

8 Fragen — teste dein Verständnis von Animation und Interaktion.

0/8
Fragen richtig beantwortet

Nachschlagewerk

Glossar — Schlüsselbegriffe

requestAnimationFrame
Klicken zum Aufdecken
Browser-API, die eine Callback-Funktion vor dem nächsten Repaint aufruft. Synchronisiert Animationen mit der Bildschirm-Refreshrate (~60 FPS) und pausiert bei inaktiven Tabs.
Delta-Time
Klicken zum Aufdecken
Zeitdifferenz zwischen zwei Frames in Sekunden. Wird als Faktor für Bewegungsberechnungen genutzt, damit Animationen unabhängig von der Framerate gleich schnell laufen.
Immediate Mode
Klicken zum Aufdecken
Rendering-Paradigma, bei dem jeder Frame komplett neu gezeichnet wird. Canvas arbeitet so — im Gegensatz zu SVG/DOM (Retained Mode), wo Objekte als persistente Elemente existieren.
Compositing
Klicken zum Aufdecken
Browser-Optimierung, bei der bestimmte CSS-Eigenschaften (transform, opacity) auf einer eigenen GPU-Ebene gerendert werden — ohne Layout/Paint-Neuberechnung.
Event-Loop
Klicken zum Aufdecken
JavaScripts Mechanismus für asynchrone Verarbeitung. Die Event-Loop prüft die Callback-Queue und führt wartende Funktionen aus, sobald der Call-Stack leer ist. Animationen werden in der Render-Phase der Event-Loop eingeplant.
Easing-Funktion
Klicken zum Aufdecken
Mathematische Funktion, die den zeitlichen Verlauf einer Animation steuert. Statt linearer Bewegung erzeugen Easing-Funktionen (ease-in, ease-out, cubic-bezier) natürlich wirkende Beschleunigungs- und Bremskurven.

Reflexion

Diskussions­fragen

„Moderne Webanwendungen und Spiele nutzen oft GPU-beschleunigtes Rendering. Welche ethischen und ökologischen Implikationen hat es, wenn aufwendige Animationen und Partikeleffekte zum Standard in Web-Design werden — insbesondere im Hinblick auf Barrierefreiheit (prefers-reduced-motion) und Energieverbrauch?"
„Canvas vs. SVG: In welchen Szenarien ist ein Retained-Mode-Ansatz (SVG/DOM) dem Immediate-Mode (Canvas) überlegen — und umgekehrt? Diskutiert anhand konkreter Anwendungsfälle."