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 (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 (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
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, weil diese Effekte Teil des Sprachumfangs sind und in Flash vielfältig Anwendung finden. Da die Sprache aber Javascript sehr ähnlich ist lassen sich die Beispiele gut nachvollziehen.
Mir persönlich hat für das Verständnis von Tweening Effekte dieses Kapitel aus dem Buch Programming MAcromedia Flash MX von Robert Penner geholfen. Auf seiner Seite finden sich noch ein paar mehr Flash Beispiele, z.b. dieses Flashdemo.
Die Begriffe auf deutsch werden auf dieser Seite (archive.org orginal wurde 2019 gelöscht) der FH Augsburg erklärt.
Und hier hat noch jemand anderes vor ein paar Jahren, ebenfalls eine Tweeiningscript in Javascript geschrieben: Javascript motion tween. Das Skript ist mehr oder weniger eine 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 dieser 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. Oktober 2012 -- Tween Beispiele (0)
Das Tween Objekt Ich vertiefe hier noch einmal die...
- 22. Juni 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...
7786 mal gelesen.
4 Kommentare
direkt zum Formular »
Seiten:
8. Juli 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!
8. Juli 2011: 14:28
Danke!
Der Fehler ist korrigiert.
23. März 2012: 0:29
Toller Artikel! Hat mir sehr geholfen – viele Dank!
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 […]