Ein Zeichenobjekt wird wiederholt an verschiedenen Orten in einer Zeichenfläche gezeichnet, wobei damit der Eindruck einer Bewegung entsteht vor dem Zeichnen an einem neuen Ort das Objekt am alten Ort gelöscht werden muss, indem der ganze Zeichenbereich gelöscht wird (clearRect()).
Das wiederholte Zeichnen kann entweder veraltet mit den Funktionen setTimout() oder setInterval() oder ruckelfrei durch requestAnimationframe() aufgerufen werden.
requestAnimationFrame() muss rekursiv, d.h. innerhalb einer Funktion angewendet werden, die sich immer wieder selbst aufruft, und braucht deshalb eine Abbruchbedingung.
setInterval() muss einer Intervall-ID zugeordnet werden, damit die Animation gestoppt werden kann, und hat als Parameter die Zeichenfunktion und die Intervallzeit.
Das Beispiel Wurf mit Luftwiderstand ist mit setInterval(), alle anderen Animationen mit requestAnimationframe() programmiert.
Beschreibung der JavaScript-Methode requestAnimationFrame()
let startzeit;function anzeigeZeit(timestamp) { if (!startzeit) { startzeit = timestamp; // Den Startpunkt der Animation setzen } // Aktuelle Zeit seit dem Start berechnen const vergangen = timestamp - startzeit; // Hier könntest du deine Animation durchführen, z.B. ein Element verschieben // Rekursiver Aufruf, um die Animation fortzusetzen // Wenn die Animation weiterlaufen soll (z.B. innerhalb einer bestimmten Zeit) if (vergangen < 5000) { // Beispiel: Animation stoppen nach 5 Sekunden requestAnimationFrame(anzeigeZeit); }}// Starte die AnimationrequestAnimationFrame(anzeigeZeit);Beschreibung der JavaScript-Methode setInterval()
const startzeit = 15;let zaehler = startzeit;