Tween Referenz

Die vollständige Dokumentation aller an Tween beteiligten Objekten.

Tween

Das eigentliche Objekt für die Animationen, es ist ein EventObj. Kann also mit EventListener gesteuert werden. Die meisten Methoden sind Wrapper auf die erzeugten Animationen, diese sind wiederrum Easing Objekte.

animation([object, object, ...)
Erzeugt ein oder mehrere Animationsobjekte. Beschreibung der Parameterobjekte s. Easing.animation().
Rückgabe: Das zuletzt erzeugte Easing Objekt.
start([parallel])
Startet die Animation. Ist der Parameter true laufen sie parallel ab, ansonsten seriell.
rewind()
Startet die Animationen jeweils Rückwärts, aber in der eingegebenen Reihenfolge.
stop()
Stoppt die Animation.
pause()
Pausiert die Animation.
isBusy()
Läuft die Animation.
isReady()
Sind alle Animationen beendet.
getAnimation(nr)
Rückgabe des Easing Objekt.

Easing

Ist ein TimerLoop Objekt. Mit Easing Objekten werden die Animationen durchgeführt. Im Konstruktor oder in der Funktion animation() können die Parameter übergeben werden.

Methoden

Easing(parameter)
Konstruktor. Der Parameter hat die selben Eigenschaften wie Easing.animation()
animation([param])
param ist das Objekt wie beim Konstruktor. Die Animation wird nicht gestartet.
Name Defaultwert Beschreibung
callback function(evt) {} Die Funktion, die während der Animation aufgerufen wird. Der Parameter ist ein Objekt, das vom EventObjekt erzeugt wurde, erweitert um die Eigenschaft value das ist der aktuell berechnete Wert.
duration 100 Zeitdauer der Animation
start 0 Startwert der Transition (Berechung während der Animation)
end 100 Endwert der Transition (Berechung während der Animation).
Werden die beiden Werte weggelassen wird die Animation im Bereich von 0-100 berechnet (Prozent)
transition Math.linear Funktion der Animationsberechnung.
In der math.js Bibliothek habe ich die Funktionen aus Robert Penners Buch Programming MAcromedia Flash MX gesammelt.
wait 0 Zeitdauer wie lange die nächste Animation warten soll. Dieser Parameter hat nur einen Effekt, wenn die Animationen seriell, also hintereinander, gestartet werden.
setRange([von, bis])
Setzt die Grenzwerte, der Animationsberechnung.
setTransition([Funktion])
Setzt die Berechnungsfunktion für die Animation. Diese befinden sich in math.js
toogleDirection()
Ändert die Richtung.
rewind()
Startet die Animation Rückwärts.
direction()
Richtung als true/false.

TimerLoop

Die Timerschleife. Erbt vom EventObj. Damit können über einen defnierten Zeitraum, in regelmäßigen Abständen, Aktionen ausgefürt werden. Diese Schleife kann unterbrochen und gestoppt werden.

Methoden

fps([frames])
Frames pro Sekunde. Errechneter Wert, aus der Zeitdauer des Timers und der Framerate. [frames] ist ein Wert für die Anzahl der Frames pro Sekunde.
start()
Startet den Timer
stop()
Stoppt den Timer
pause()
Hält den Timer an, ein nochmaliger Aufruf der Funktion fährt dann an dem gestoppten Zeitpunkt fort.
back()
Hilfsfunktion, die die Ablaufzeit umkehrt, wird benötigt um eine Animation rückwärtslaufen zu lassen.
isBusy()
prüft ob der Timer gerade läuft.
isPause()
prüft ob der Timer pausiert.
isReady()
prüft ob der Timer fertig ist.
duration([dauer])
Lesen/Setzen der Zeitdauer des Timers.

Ein TimerObjekt feuert folgende Events:

Das Eventobjekt das den Event Funktionen übergeben wird, hat folgende Eigenschaften:

EventObj

Das EventObj erweitert beliebige Objekte um eine Funktionalität zum Eventhandling. Event Funktionen hinzugefügt werden mit addEventListener(). fireEvent() lösen die Events aus.

Methoden

.addEventListener(name, function)
Fügt dem Objekt einen Eventlistener hinzu.
Rückgabe: listener[object]
Das listener Objekt kann verwendet werden, um einen Event zu löschen, deaktivieren oder aktivieren.
.fireEvent(name, event)
Feuert ein Event, als Parameter wird ein Objekt erzeugt mit folgenden Eigenschaften.
  • type - Name des Events
  • self - Objekt das den Event feuert (i.d.R. this)

Event

Events des Tween Objekt übergeben ein Objekt mit folgenden Eigenschaften:

.type
[string] Name des Eventyps
.self
[object] Objekt das den Even ausgelöst hat
.start
[number] Zeitpunkt des Beginn der Animation in Millisekunden
.elapsed
[number] Zeit seit Beginn der Animation in Millisekunden
.tick
[number] Zeit seit dem letzten Frame. Dieser Wert hängt davob ab, wie Zeitintensiv die Animationsfunktion ist und von der Geschwindigkeit des Rechners und Browsers.
.value
[number] Aktueller Wert der Transitionfunktions. Mit diesem Wert können die Eigenschaft(en) verändert oder berechnet werden.