Javascript ist Toll!

3. September 2010 - 13:27

Tweening – Effekte mit Javascript

Tweening und Transition sind zwei Begriffe aus der Welt der Computeranimation. Heute möchte ich eine Klasse zeigen, wie diese Techniken auch bei Javascript Animationen Verwendung finden.

Das Prinzip der Techniken ist relativ schnell erklärt.
Bei einer normalen Animation, wie sie z.b. auch mein aufgleitendes Popup benutzt, ist die Veränderung des Wertes (hier die Höhe und Breite) linear zur Zeit. In jedem Interval werden die Werte um den gleichen Wert verändert. Dadurch wirkt die Animation statisch und langweilig.

Ein weiterer großer Nachteil dieser Methode ist, dass wenn der Ablauf einmal haken sollte, z.b. weil die Berechnung länger dauert oder der Browser einen kurzen Moment mit etwas anderen beschäftigt ist, dann stockt die Animation kurz und wird danach einfach fortgesetzt, es findet also keine flüssige Ausführung statt.
Ausserdem läßt sich die Ausführungszeit nur verändern, in dem der Abstand der einzelnen Schritte in jedem Interval, vergrößert oder verkleinert wird.

Das folgende Diagramm, zeigt den Ablauf solch einer Art der Animation. Die horizontalen Achse ist die Zeit und vertikal, der Wert der Änderung (in dem Beispiel des aufgleitenden Popups, wär das die Breite oder die Höhe):

Diagramm: linearer Tween
Diagramm (1) - lineare Animation

Tweening

Die Animation läuft dagegen flüssiger, wenn der Wert der Veränderung, in Relation zu der abgelaufenen Zeit gesetzt wird.
Das heißt die Bewegung läuft im Verhältnis zur Zeit und wirkt dadurch geschmeidiger. Tweening wird es deshalb genannt, weil die Bilder (hier Werte) zwischen dem Zeitinterval berechnet werden, aber nicht jedes Einzelbild (Wert). Transition heißt Übergang. Also der Übergang von einem Zustand in den anderen.

Bildlich läßt sich Tweening in einem Diagramm sichtbar machen. Wenn im Formular des Beispiel unten die lineare Funktion ausgewählt wird und ein relativ kurzer Zeitinterval für den Ablauf der Animation eingetragen wird, z.b. 100ms, dann sieht ein Diagramm des Ablauf z.b. so aus:

Diagramm: linearer schneller Tween
Diagramm (2) - lienar Tweening in 100ms

Es läßt sich erkennen, dass zwischen den einzelnen Punkten ein großer Abstand ist. Aber alle Punkte liegen auf der selben Geraden, wie im Diagramm oben.

Der Abstand kommt daher, weil der Browser nur in bestimmten minimalen Intervallen die Funktion zum Berechnen des Wertes ausführen kann. Firefox braucht typischerweise ca. 10ms für ein Interval, egal wie klein die Funktion ist, die ausgeführt wird. Er kann also in einer Gesamtdauer von 100ms, nur ca. 10 Punkte berechnen. Trotzdem wirkt die Animation so, als ob das Viereck sich flüssig bewegt, da unser Auge aus den Sprüngen, die eigentlich statt finden, eine kontinuierliche Bewegung formen.

Ease Effekte

Ein weiterer Effekt, der in einem solchen Bewegungsablauf oft eingebaut wird, heißt im englischen Ease. Was soviel bedeutet wie bremsen. Es soll also ein Bremseffekt (oder Beschleunigungseffekt. Was aber im Prinzip das Gleiche ist.) erzeugt werden, der den Ablauf natürlicher erscheinen läßt. Je nachdem wann dieser Effekt wirkt, sprich man von easeIn oder easeOut. Also zu Beginn oder beim Ende der Animation.

Dieser Effekt kann dann noch durch Mathematische Funktionen verstärkt oder abgeschwächt werden, z.b. durch die Berechnung einer Potenz oder des Sinus.
Daneben gibt es besondere Effekte wie z.b. bounce, dadurch wird ein Springeffekt erzeugt wie wenn ein Gummiball auf den Boden fällt oder elastic, wie an einem Gummiband.
Daher die Bezeichnungen für die ease Efekte, wie z.b easeInQuad, easeInOutSine, bounceEaseOut usw.

Beispiel

.duration: ms - .ease:

Das folgende Diagramm zeigt nach Ablauf der Funktion an welche Punkte gesetzt wurden.

Die Funktionen, die in dem Beispiel Formular ausgewählt werden können, stammen zum großteil aus dem Kapitel von Robert Penners Buch und wurden von mir für meine Klasse modifiziert. Die Funktionen sahen im Prinzip alle so aus:

Ease.InQuad = function (t, b, c, d) {
return c*(t/=d)*t + b;
};

Der erste Parameter ist der Zeitinterval, der zweite der Offset, der dritte der maximale und der vierte die Differenz zwischen Offset und Maximal. Ich habe diese Funktionen modifiziert, um die Berechnungen etwas zu beschleunigen. Da alle Werte ausser t statisch sind und in meiner generischen Tween Klasse der Offset 0 ist (und damit die Differenz immer gleich dem maximal Wert), sieht die Funktion jetzt so aus:

Ease.InQuad: function (c) {
	return function(t) {
		return c * (t /= c) * t;
	};
}

Die Funktion gibt eine Funktion zurück, die nur noch den Zeit abhängigen Parameter erwartet. Das optimiert etwas die Berechnung (s. Quelltext) während einer Animation.

Weitere Informationen

Das meiste, was sich zu diesem Thema im Netz findet, handelt von ActionScript.
Dort sind diese Effekte Teile des Sprachumfangs und finden vielfältig Anwendung. Da die Sprache Javascript sehr ähnlich ist, lassen sich diese mit etwas Grundverständnis in Javascript, aber gut nachvollziehen.

Mir persönlich hat für das Verständnis der ganzen Sache sehr viel dieses Kapitel aus dem Buch Programming MAcromedia Flash MX< von Robert Penner geholfen. Auf seiner Seite finden sich noch ein paar Flash Beispiele, z.b. dieses Flashdemo.

Die Begriffe auf deutsch werden auf dieser Seite der FH Augsburg erklärt.

Und hier hat noch jemand anderes, vor ein paar Jahren, eine Umsetzung in Javascript geschrieben: Javascript motion tween. Das Skript ist mehr oder weniger Umsetzung der ActionScript API und auf der Seite sind einige Beispiele, die zeigen was damit alles möglich ist.

Nicht vergessen hinzuweisen möchte ich an dieser Stelle auf Mootools. Dessen Effekte basieren ebenfalls auf diese Technik. Die Klasse Fx.Tween ist im Kontext des Frameworks ein ausgereiftes Hilfsmittel, um vielfältige JS Animationen zu erzeugen. Wer jetzt nicht etwas selbstgeschriebenes basteln will, kann damit sicher gut Leben.

tween.js

Die Klasse kann als Grundlage für eigene Animationsklassen benutzt werden und ich werde diese in Zukunft benutzen um zu zeigen, wie man einfache aber effektive Animation umsetzt.

Download: tween.js

ähnliche Artikel

  • 27. October 2012 -- Tween Beispiele (0)

    Das Tween Objekt Ich vertiefe hier noch einmal die...

  • 22. June 2012 -- Tween(2) (0)

    Die Technik um mit Javascript eine Bewegung zu animieren...

  • 29. September 2008 -- aufgleitende Javascript Popups (1)

    Das folgende Skript öffnet ein HTML Element mit einer...

Comments (4)
1194 mal gelesen.

4 Kommentare

Leave a comment »

Seiten:

1. Comment von: DerGenaue
8. July 2011: 14:21

Sehr interessanter Artikel, leide mit Fehler:
Z.37:
* var tween = new Tween();
* tween.start({duration:800, max:100, ease: Ease.InOutQuad});

Vielen Dank, derartiges kann ich gut gebrauchen!

2. Comment von: Struppi
8. July 2011: 14:28

Danke!
Der Fehler ist korrigiert.

3. Comment von: Philipp
23. March 2012: 0:29

Toller Artikel! Hat mir sehr geholfen – viele Dank!

4. Pingback von: Tween(2) [Javascript ist Toll!]
7. August 2012: 11:47

[…] Technik um mit Javascript eine Bewegung zu animieren hatte ich in einem älteren Artikel bereits beschrieben und kündigte dort eine Fortsetzung an. Doch das Skript, was ich dort verwendet […]

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful