Spezifikation für hübsches Einblenden

[antisteo]

Hi,

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"/>

(Kommentare und Verbesserungsvorschläge erwünscht)
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?

[Schrompf]

Da gibt's vieles. Ich empfehle zur Anregung die Qt Easing Curves, da hab ich auch die meisten Ideen her. Für kurze Übergänge fand ich "Linear" immer prima, für etwas längere (>0.2s) würde ich Quadratisch nehmen: schnell am Anfang, verlangsamend am Ende.

[Artificial Mind]

Also für das meiste würde ich diese Funktion empfehlen: x * x * (3 - 2 * x) http://www.wolframalpha.com/input/?i=pl ... x+%3D+0..1
Mathematisch ist diese Funktion halt gut, weil f(0) = 0, f(1) = 1 (also Interpolation zwischen 0 und 1) und f'(0) = f'(1) = 0 (das macht sie am Anfang und am Ende "smooth") ist.

Es gibt noch die etwas stärkere Variante, die auch f''(0) = f''(1) = 0 erfüllt: 6*x^5 - 15*x^4 + 10*x^3 http://www.wolframalpha.com/input/?i=pl ... x+%3D+0..1

Du wertest halt immer f(x), x = 0..1 aus, mit x = 0 Start und x = 1 Ende.
Wenn du eine zweidimensionale Animation brauchst, machst du einfach diese Funktion für jede Koordinate.
Invert kannst du mit reinbekommen, indem du nicht f(x) auswertest, sondern f(1-x), bzw x von 1..0 laufen lässt.

[antisteo]

Also für das meiste würde ich diese Funktion empfehlen: x * x * (3 - 2 * x) http://www.wolframalpha.com/input/?i=pl ... x+%3D+0..1
Mathematisch ist diese Funktion halt gut, weil f(0) = 0, f(1) = 1 (also Interpolation zwischen 0 und 1) und f'(0) = f'(1) = 0 (das macht sie am Anfang und am Ende "smooth") ist.

Es gibt noch die etwas stärkere Variante, die auch f''(0) = f''(1) = 0 erfüllt: 6*x^5 - 15*x^4 + 10*x^3 http://www.wolframalpha.com/input/?i=pl ... x+%3D+0..1

Du wertest halt immer f(x), x = 0..1 aus, mit x = 0 Start und x = 1 Ende.
Wenn du eine zweidimensionale Animation brauchst, machst du einfach diese Funktion für jede Koordinate.
Invert kannst du mit reinbekommen, indem du nicht f(x) auswertest, sondern f(1-x), bzw x von 1..0 laufen lässt.

Danke für die Formeln. Ich werd gleich mal probieren.

Edit: Jawol, sieht schön smooth aus :)