Unterrichtsleitfaden: Einführung in JS - Grundlagen: Animation

Was gelernt wird

• Die Grundidee hinter Animationen - eine Zeichnung, die immer und immer wieder wiederholt wird, jedes Mal etwas anders.
• Wie man eine Funktion draw() in seinem Programm definiert, so dass die darin enthaltenen Codezeilen immer wieder vom Computer aufgerufen werden, etwa 60 Bilder pro Sekunde.
• Wie man eine Animation programmiert, indem man eine Variable definiert, sie in jedem Bild ändert und diese Variable verwendet, um einen Aspekt der Formen im Programm zu ändern.
• Wie man die in Variablen gespeicherten Zahlen mit Hilfe von Abkürzungen, +=, -=, ++ und --, erhöht und verringert.

Die Lernenden werden in der Lage sein, Programmcode zu schreiben wie:

Wo die Lernenden Probleme haben

• Lernende sind oft verwirrt darüber, welcher Code innerhalb der Funktion draw() und welcher außerhalb liegt. Zum Beispiel könnten sie ihre Animationsvariable innerhalb der Funktion draw() deklarieren und inkrementieren. Die Animation wird nicht funktionieren, da sich die Variable nicht wirklich bei jedem Frame ändert. Sie müssen die Variable außerhalb von draw() deklarieren, am Anfang des Programms, und sicherstellen, dass alles, was sie innerhalb von draw() tun, die Variable ändert. Ermutige die Schüler dazu, über die Werte ihrer Variablen und die Position ihrer Zeichnungen zu jeder Sekunde nachzudenken. Sie können sogar zuerst eine Animation auf Papier skizzieren, um ein besseres Gespür für die Werte zu bekommen.
• Lernende können verwirrt darüber sein, welche Codezeilen sich tatsächlich innerhalb der Funktion draw() befinden. Ermutige sie, den Code innerhalb ihrer Funktion einzurücken, damit sie ihn besser visualisieren können.
• Lernende können versuchen, in ihrem Projekt mehrere Formen in verschiedene Richtungen zu animieren und haben Schwierigkeiten, herauszufinden, wie das geht. In diesem Fall werden sie mehrere Variablen verwenden müssen. Schlage vor, dass sie darüber nachdenken, was die verschiedenen Werte für jede Form im Laufe der Zeit sein würden, und dann werden sie sehen, welche Variablen sie bei jedem Frame ändern müssen.

Zusätzliches Material: Diskussionsfragen

• Machen Variablen jetzt mehr Sinn, da sie für Animationen verwendet werden?
• Schau dir eine Animation an, z.B. einen Pixar-Kurzfilm. Erkläre wie man das mit Variablen animieren könnte.

Zusätzliches Material: Quizfragen