Documentation

Steuerung

L: Der Staubsaugerroboter dreht sich um 15° nach links. Zum Drehen muss man wiederholt drücken. Wenn eine Animation läuft wird diese beendet.

R: Der Staubsaugerroboter dreht sich um 15° nach rechts. Zum Drehen muss man wiederholt drücken. Wenn eine Animation läuft wird diese beendet.

A: Die Animation der Drehung des Staubsaugerroboters wird automatisch abgespielt und auch wieder beendet, wird die Taste noch einmal gedrückt.

S: Super übertriebener Geschwindigkeits-Modus! Kann über das Drücken der anderen Tasten wieder gestoppt werden.

Aufgabenstellung

Implementieren Sie eine sich drehende 2D-Scheibe aus Einzelbildern, welche Sie mit JavaScript laden und in einem Image-Element zeigen (nicht im Canvas). Die Einzelbilder sollen, ähnlich wie bei einer Sprite-Sheet-Animation ode einem Animationsfilm, so ausgetauscht und eingeblendet werden, dass visuell der Eindruck einer Rotation entsteht. Auf jedem Einzelbild ist ein Rotationszustand der Scheibe zu sehen, z.B.: 0°, 15°, 30°,...

Es ist Ihnen überlassen, ob sie die Bilder auf mehrere Dateien verteilen, oder alle Bilder der Animation als Sprite-Sheet also in einer Datei anordnen.

Auf den Tastendruck 'l' oder 'r' soll sich die Scheibe augenscheinlich ein Stück nach links beziehungsweise nach rechts drehen. Zum Drehen muss man wiederholt drücken.

Erweiterungen

Außer einer Scheibe kreieren und animieren Sie noch ein anderes Objekt Ihrer Wahl als Sprite-Sheet, z.B einen hüpfenden Hasen.

Die Scheibe dreht sich automatisch mit Taste "a", dazu muss diese kontinuierlich animiert werden.

Umsetzung

Inspiration für die Animation: https://giphy.com/gifs/cat-cute-roomba-3iBcRAErFhFwoTVbN5

Grundlagen für das lesen von Bildern: Moodle Kurs-Materialien des Kurses Graphical Visualisation Technologies

Hilfestellung zur Implementierung des Intervalls der Bilder und der Erstellung der Animation über veränderung der Background-Position: https://levelup.gitconnected.com/three-ways-to-animate-sprite-sheet-image-a5c000f0c579

Die Grafiken wurden von mir per Hand (komplett in Photoshop) erstellt und um die mittlere Achse des Staubsaugerroboters jeweils um 15° rotiert.

Die durchgehende animierte Lade-Animation wurde von mir in Adobe After Effects erstellt, als Einzelbilder exportiert und zu einem Tileset zusammengestellt.

Über die CSS-Background-Position wird über die Einzelbilder eine Animation erstellt.

Anmerkungen

Ich habe absichtlich davon abgesehen, das Bild beispielsweise in Adobe After Effekts zu animieren und die Animation direkt als einzelne Bilder oder als Spritesheet zu exportieren, um eine Animation "per Hand" zu erzeugen, diesen Weg auf diese Weise nachzuvollziehen.

Da durch Drücken von A versehentlich die Animation zuerst unendlich viel schneller abgespielt wurde und ich es überaus witzig fand, habe ich das "Feature" nun absichtlich (über die Taste 'S') mit eingebaut.