Easing-Funktionen werden verwendet, um sanftere Bewegungsabläufe in Tweens zu erzeugen[^1. siehe auch http://www.robertpenner.com/easing/]. Die Funktionen berechnen in Abhängigkeit von der verstrichenen Zeit t, dem Startwert s, der gewünschten Wertänderung c und der Gesamtdauer der Animation d einen neuen Wert für den Ort eines Objektes. Natürlich können Easing-Funktionen auch für alle ander Arten von zeitlichen Wertänderungen benutzt werden, wie beispielsweise zur Rotation von Objekten oder zur Änderung einer Lautstärke.

function easing(t: Number, s: Number, c: Number, d: Number): Number {
	// calculate new value
	return value;
}

Rober Penner hat eine ganze Reihe von Easing-Funktionen gesammelt, die mitlerweile in vielen Animations-Frameworks für ActionScript oder JavaScript integriert sind. Natürlich sind Beispielanimationen gut geeignet, um dazu finden sich auch schon ausführliche Beispiele im Internet. Ein anderer Weg zur Visualisierung von Easing-Funktionen ist die einfache Darstellung in einem Funktionsgraph. Dazu gibt es unter janitor61.com eine schöne Übersicht der Funktionsgraphen im PDF-Format:

Quelle: http://www.janitor61.com/?p=24”

Bei der näheren Betrachtung dieser Darstellung haben mich folgende Punkte gestört:

1. Da sowohl die Achsen als auch die Funktionsgraphen in schwarz gezeichnet wurden, kann man sie schwer auseinanderhalten. So geht beispielsweise aus der Abbildung der Funktion Circ.easeOut nicht hervor, wo der Funktionsgraph endet.
2. Die Graphen können nur schwer miteinander verglichen werden, da die einzelnen Typen (easeIn, easeOut, easeInOut) in der Darstellung nicht über- oder nebeneinander stehen.
3. Die vollständige Umrahmung der Koordinatensysteme (aka. “Chart Junk”[2. vgl. Edward Tufte, The Visual Display of Quantitative Information]) stört bei der Betrachtung der Diagramme.

Die folgende Visualisierung verbessert die angesprochenen Punkte:

Die Darstellung wurde in ActionScript3 erzeugt, daher gibt soll an dieser Stelle auch auf die interaktive Version verwiesen werden.