Ein dynamisch gefärbter Eiffelturm mit Nachbildeffekt |
Die dynamische Farbgebung ist eine der offensichtlichsten Darstellungen der permanenten Animationsschleife von JavaZ. Sie aktualisiert sowohl die Bewegung des Eiffelturms als auch das gesamte Rendering, einschließlich der Farbgebung. Frame für Frame hängen alle Rendereinstellungen von einer einzigen Variablen ab, der ID, die von einem Javascript Window Object der JavaZ-Animationsschleife generiert wird: setTimeout()
.
Schwerkraft umschalten (standardmäßig deaktiviert), um die Struktur auf den Boden fallen zu lassen | |
play and pause die Animationsschleife (standardmäßig aktiviert) | |
reset oder die komplette Grafik neu laden |
JavaZ Animationsschleife
animate_canvas()
ist die Funktion, die den Animationscode ausführt. Diese Funktion aktualisiert zunächst den Zustand des Canvas-Elements. Dann überträgt es diese Aktualisierung auf den Canvas Context, um es zu zeichnen. animate_canvas()
wiederholt dann seine eigenen ersten Schritte, indem es sich einfach selbst zurückruft, wodurch eine unendliche Rekursion erzeugt wird [1].
function animate_canvas() {
if (clearRect){context.clearRect(0,0,width,height);}
update_canvas();
render_canvas(context);
t = setTimeout(animate_canvas, 35);
}
- JavaZ ruft
animate_canvas()
auf, was wiederumupdate_canvas()
aufruft. Diese Funktion aktualisiert den aktuellen Zustand des Canvas-Elements. In der Zwischenzeit löscht die clearRect() Methode, wenn dies von einem booleschen "clearRect"-Wert verlangt wird, das gesamte Canvas-Element oder die angegebenen Pixel innerhalb eines bestimmten Rechtecks [2]. - Sobald die Aktualisierung abgeschlossen ist, zeichnet
render_canvas(context)
den aktualisierten Zustand des Canvas-Elements. - Dann ruft JavaZ die Funktion
setTimeout()
auf. Die Methode setTimeout() ruft eine Funktion, nämlich ihre eigene aufrufende Funktion, nach einer standardmäßigen Ablaufzeit von 25 Millisekunden (40 Frames pro Sekunde) auf. DassetTimeout()
wird normalerweise nur einmal ausgeführt. Da es direkt bewirkt, dassanimate_canvas()
erneut ausgeführt wird, erzeugt es eine Schleife, es sei denn, es wird etwas getan, um es zu stoppen.
Wenn eine wiederholte Ausführung erforderlich ist, wird normalerweise die Methode setInterval()
in Javascript verwendet. Aber JavaZ verwendet stattdessen die von der Methode setTimeout()
hergestellte id als Zeitvariable (t). Dies ermöglicht es JavaZ, das Canvas-Element mit der Zeit zu aktualisieren. Diese Zeitvariable ermöglicht Folgendes:
- indirekt die Anzahl der Frames pro Sekunde durch die Methode
setTimeout()
festlegen, - Anhalten oder Stoppen der Animation durch Löschen und Zurücksetzen der ID der Methode setTimeout(),
- Zurücksetzen des Canvas-State (Zustand) beim Neuladen oder Ändern der Fenstergröße (Responsivness),
- irgendwann ein Ereignis auslösen. Keine Notwendigkeit, eine zusätzliche Stoppuhr zu codieren.