Für das Spiel gwX gibt es ja HTSL, eine XML-Sprache, mit der man die Menüs spezifiziert.
Nun ist es ein vielgefragter Featurewunsch, dass etwas "Schwung" in die Menüs kommt. Mein Teammate hat folgende Spezifikation vorgeschlagen:
Code: Alles auswählen
// Elemente sollten in HTSL um ihre eigene Achse rotiert werden können, imho. Per CSS.
/*
Animationen werden im HTSL als Elementattribut definiert
Typen:
- fade : Blendet ein Element über "duration" Frames lang gleichmäßig ein
- move: Verschiebt ein Element über "duration" Frames lang gleichmäßig um insgesamt "X" bzw. "Y" Einheiten. Beim Erstellen hat das Element also als Position seine Position -"X" und -"Y"
- rotate: Rotiert ein Objekt "duration" Ticks lang um seinen Mittelpunkt. Dabei werden "count" Umdrehungen ausgeführt (Default 1)
- scale: Skaliert ein Element über "duration" Ticks auf "size" (1.0 = Ursprüngliche Größe, 2.0 = Doppelt). Elementmitelpunkt bleibt gleich. Default für "size" ist 4.0
Immer vorhandene Parameter:
- duration: Länge einer Animation. Default: 30
- start: Ticks, nach denen die Animation ausgeführt wird. Default: 0
- stop: Ticks, nach denen die Animation abgebrochen wird. Default start+duration
- smooth: Wenn wahr, wird die Animation mit steigender Geschwindigkeit abgespielt. Beispiel für Move: Das Element bewegt sich zunächst ganz schnell und dann immer langsamer ins Bild (-> Gleichmäßig beschleunigte Bewegung). Default: True
- invert: Wenn wahr, wird die Animation rückwärts abgespielt. Default: False
- force: Wenn wahr, wird die Animation auch noch abgespielt, wenn sich das Menü des Spielers verändert (z. B., um Ausblenden nicht abzubrechen),
das Element bleibt also dann für die Dauer der Animation noch sichtbar. Default: False
*/
# Folgendes blendet Hallo ein. Dabei wird es von links eingeschoben und erscheint dabei.
<foo animation='[{"type": "fade"},{"type": "move", "x": 100}]'>Hallo</foo>
# Folgendes blendet Tschö aus. Dabei wird es immer schneller immer größer und verschwindet dabei.
<bar animation='[{"type": "fade", "invert": true}, {"type": "scale"}]'>Tschö</bar>
# Folgendes lässt einen Pfeil von links einfliegen und rotiert ihn dabei
<arrow animation='[{"type": "fade"}, {"type": "rotate"}, {"type": "move", "x": 100}]' src="..." content="img"/>
Jetzt meine Frage: Welche Übergangsfunktion soll ich für ein "smooth move" benutzen?
- Linear ist zu linear
- Quadratisch ist auch nicht gerade hübsch
- Exponentiell wird hinten raus zu lahm
Außerdem würde ich gerne smooth und invert zu irgendwas zusammenfassen. Welche Kurven für Blending, Rotationen und Bewegungen kennt ihr, die gut aussehen?