ZFX + Developia

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