05 Animationen mit requestAnimationFrame

Orientierung

Was brauchst du als Basiswissen?

Du kennst Variablen, Funktionen, Bedingungen und `addEventListener`. Du kannst CSS-Eigenschaften mit JavaScript verändern.

Worum geht es?

Eine Spielfigur bewegt sich nicht durch einen einzigen großen Sprung. Ihre Position wird viele Male pro Sekunde ein kleines Stück verändert. Der Browser kann mit `requestAnimationFrame` eine Funktion passend zur nächsten Bilddarstellung aufrufen.

Was ist das Ziel?

Du verstehst eine Animationsschleife, trennst Zustand und Darstellung und steuerst eine Figur mit der Tastatur.

Erarbeitung

Theorie

Aufgabe zum Einstieg

        let x = 0;

        function animiere() {
            x = x + 2;
            figur.style.left = x + "px";
            requestAnimationFrame(animiere);
        }

        requestAnimationFrame(animiere);

Im Video wird zuerst die fertige Bewegung gezeigt und danach der Ablauf Bild für Bild angehalten.

Aufgabe 1

Welche Zeile verändert den Zustand?

Aufgabe 2

Welche Zeile verändert die sichtbare Darstellung?

Aufgabe 3

Warum steht der erneute Aufruf am Ende der Funktion?

Größere Aufgabe: Eine Figur steuern

Lade die drei Dateien in denselben Ordner:

Spielfeld

Stylesheet

JavaScript

Öffne zunächst die HTML-Datei. Die Figur bewegt sich bereits automatisch. Bearbeite dann die Aufgaben nacheinander.

Aufgabe 4

Verändere Geschwindigkeit.

Aufgabe 5

Verändere die Bewegungsrichtung. Erstelle dazu auch eine Variable vy.

Aufgabe 6

Passe vx und vy so an, dass das Zielfeld erreicht wird.

Aufgabe 7

Lass die Figur am rechten Rand anhalten. Nutze dazu die Breite des Spielfelds und der Figur oder zunächst passende feste Zahlen.

Aufgabe 8

Lasse die Figur sich wieder nur nach links bewegen (setze vy einfach auf 0). Statt anzuhalten soll die Figur am Rand ihre Richtung wechseln. Verändere dazu das Vorzeichen von `vx`. Tipp: Merke dir mit einer Variablen die Bewegungsrichtung (z.B. steht 0 für "nach rechts" und 1 für "nach links").

Aufgabe 9

Zusatz: Füge das Abprallen auch für die y-Richtung hinzu.

Aufgabe 10

schwere Zusatzaufgabe: Viuelleicht bist du in Klasse 10 und kennst den Sinus. Lasse die Figur auf einer Sinuswelle von links nach rechts laufen.

Kurzer Blick auf Zeitsteuerung

`requestAnimationFrame` ist für sichtbare Animationen gedacht. Manchmal soll nur einmal nach einer Wartezeit etwas geschehen:

setTimeout(zeigeZiel, 2000);

Die Zeit wird in Millisekunden angegeben. Der übrige Code wartet dabei nicht, sondern läuft weiter.

Aufgaben zur Fehleruntersuchung

Aufgabe 11

Was passiert, wenn `requestAnimationFrame(animiere)` fehlt?

Aufgabe 12

Was passiert, wenn es innerhalb derselben Funktion zweimal ausgeführt wird?

Rück- und Ausblick

Was muss man wissen/können?

Eine Animation besteht aus vielen kleinen Änderungen. Die Animationsfunktion verändert den Zustand, stellt ihn dar und fordert mit `requestAnimationFrame` das nächste Bild an. Tastaturereignisse können Zustände setzen, die in der Animationsschleife ausgewertet werden.

Was können anschließende Themen sein?

Damit sind wichtige Grundlagen für ein eigenes Spiel vorhanden: Eingabe, Zustand, Schleifen, Verzweigungen und Animation. Zeit für eine kleine Prüfung...