Tween(2)
Die 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 habe, hat sich im Umgang als etwas sperrig erwiesen, daher habe ich es nun komplett neu geschrieben.
Die neue Tween-Klasse kann nun deutlich mehr.
Mit ihr ist es möglich mehrere Elemente gleichzeitig oder auch mehrere Animationen parallel oder hintereinader zu benutzen. Der Animationsablauf läßt sich mit Events steuern. Dazu habe ich in das Skript eine kleine Event Klasse integriert.
Und das Tween Objekt läßt sich auch als Basisklasse für eigene Tweenobjekte benutzen. Es ist aber nicht auf Geschwindigkeit optimiert, trotzdem ist die Animationsgeschwindigkeit (gefühlt) ganz passabel.
[12.10.2012] Das Skript wurde mittlerweile mehrfach überarbeitet und ist dadurch was Funktionalität und Geschwindigkeit angeht deutlich besser geworden.
Ein- und Ausblenden
Eine einfache Verwendung ist z.b. das aus- und einblenden eines Elements. Im simpelsten Fall sieht das aus:
function example_fade(id) { var el = _(id); var tween = new Tween(); tween.animation({ callback: function(e) { el.style.opacity = e.value; }, duration:800, start:0, end:1 }); el.addEventListener('click', function() { tween.rewind(); }, false); } |
Anmerkung: (Die Funktion _() ist hier eine Kurzform für getElementById())
Beispiel
Erläuterungen
An dem Beispiel läßt sich das Prinzip erkennen. Eine Animation wird als Objekt der animation()
Funktion der Tween Instanz übergeben. Die Attribute start
und end
sind die Grenzwerte, die als [event].value der callback Funktion, während die Animation läuft, übergeben werden. duration
ist die Dauer der Animation in Millisekunden.
Dadurch, dass die Methode rewind()
bei einem Klick aufgerufen wird, läuft die Animation jedesmal umgekehrt. In diesem Fall also beim ersten Klick vom maximalen Wert 1 (end
) nach 0 (start
)
Zwei Aktionen gleichzeitig
In der Callback Funktion können aber auch mehrere Eigenschaften gleichzeitig verändert werden, z.b. die Vorder- und Hintergrundfarbe.
function example_2color(id) { var el = _(id); var tween = new Tween(); tween.animation({ callback: function(e) { el.style.color = getColor(e.value, 'ffffff', '000000'); el.style.backgroundColor = getColor(e.value, '000000', 'ffffff'); }, duration:800, start:0, end:100 }); el.addEventListener('click', function() { tween.rewind(); }, false); } |
Hinweis: Die Funktion getColor()
berechnet einen Farbwert prozentual "zwischen" zwei Farben. Die Funktion befindet sich helper.js.
Beispiel
Tween Erweitern
ColorTween Objekt
Das folgende Beispiel zeigt, wie man das Tween Objekt erweitert. Ein einfaches ColorTween-Objekt, das animiert die Hintergrundfarbe wechselt, könnte zum Beispiel so aussehen:
function ColorTween(el){ Tween.call(this); // erbt von Tween if(!el || !el.style) throw 'Kein gültiges Element'; this.animation( { callback: function(e) { el.style.backgroundColor = getColor(e.value, 'cfb90af', 'ffffff'); }, duration:500, transition: Ease.easeInOutSine } ); } ColorTween.prototype = Object.create(Tween.prototype); |
Beschreibung
Zuerst wird der Konstruktor von Tween im Kontext der aktuellen Instanz aufgerufen. Zusammen mit der Zuweisung des Tween.prototype Objekt, erbt das Objekt von Tween, Ist also eine instanceof
Tween.
Die Methode animation()
ist die Hauptfunktion des Tweenobjekt. Aus dem Parameterobjekt wird eine Ease
Instanz erzeugt. Gestartet werden die Animationen dann mit der Funktion .start()
oder .rewind
.
Beispiel
ColorTween
Objekt.Animation starten mit [klick]
MoveTween
Etwas mehr in's Detail geht das Beispiel MoveTween
. Dabei werden zwei Animationen erzeugt, die nacheinander ablaufen.
Ein Tween Objekt kann mehrere Animations Objekte steuern. Gestartet werden die Animationen mit der Funktion start
. Je nachdem ob der Parameter true/false ist, laufen die Animationen Parallel oder Nacheinander ab.
Das MoveTween Objekt, im obigen Beispiel, erbt vom Tween Objekt und fügt zwei Animation im Konstruktor der Instanz zu. Eine die, das Objekt nach oben und ein zweites, dass es nach Links bewegt.
Beide Animationen werden mit Hilfe des gleichen Objekts hinzugefügt. Lediglich die Funktion callback wird ausgetauscht. Das Objekt anim
ist keine Referenz auf ein aktives Animations Objekt. Dieses läßt sich nur über die Funktion Tween.getAnimation([index])
ermitteln.
Die Methode start() wird überschrieben und beim aufrufen die Richtungen der beiden Animationen umgedreht. Die moveTo() Methode setzt den Endwert auf die aktuelle Position und die Animation würde von der Position 0/0 beginnen, deshalb der Aufruf von toogle() und das Objekt bewegt sich nun von seiner Ausgangslage zum Nullpunkt. Das läßt sich bei jedem Klick wiederholen.
function MoveTween(el){ Tween.call(this); // erbt von Tween if(!el || !el.style) throw 'Kein gültiges Element'; // die Position des Elements var top = el.offsetTop, left = el.offsetLeft, anim; anim = { callback: function(e) { el.style.top = e.value + 'px'; }, duration:800, fps: 25, transition: Ease.bounceEaseOut, wait: 1000 // Zeitdauer wie lange nach dieser Animation gewartet wird }; this.animation(anim); // Das gleiche Animationsobjekt, aber eine andere callback Funktion anim.callback = function(e) { el.style.left = e.value + 'px'; }; // hinzufügen this.animation(anim); // Die Orginal .start() Methode sichern var base_start = this.start; this.start = function(dir) { if(this.isBusy()) return; this.getAnimation(0).toogleDirection(); this.getAnimation(1).toogleDirection(); base_start.call(this, dir); }; this.moveTo = function(l, t) { this.getAnimation(0).setRange(t, top); this.getAnimation(1).setRange(l, left); }; } MoveTween.prototype = Object.create(Tween.prototype); // Funktion, die das MoveTween Objekt erzeugt function example_move(id){ _(id).className = 'test'; var tween = new MoveTween(_(id)); tween.moveTo(winScrollPos().left, winScrollPos().top); _(id).addEventListener('click', function() { if(tween.isActive()) return; tween.start(); }, false); } |
Beispiel
Ein sich bewegendes Objekt. Es gleitet zuerst an den oberen Browserrand, wartet eine Sekunde, dann gleitet es nach Links.
MoveTween
Objekt.Animation starten mit [klick]
-
Download
Tween.js (ca. 9 KB)
zusätzlich wird noch die Datei mit den Easing Funktione benötigt: ease.js.
Ein komplette Beschreibung der Objekte und Methoden habe ich auf einer Referenz Seite aufgeschrieben.
ähnliche Artikel
- 27. Oktober 2012 -- Tween Beispiele (0)
Das Tween Objekt Ich vertiefe hier noch einmal die...
- 3. September 2010 -- Tweening – Effekte mit Javascript (4)
Tweening und Transition sind zwei Begriffe aus der...
- 29. September 2008 -- aufgleitende Javascript Popups (1)
Das folgende Skript öffnet ein HTML Element mit einer...
6964 mal gelesen.
Noch keine Kommentare
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
Tool Wordpress Datenschutz OOP Animation google Firefox Browser linux Privatsphäre Drag&Drop prototype LED Scroller about:config LED Laufschrift Javascript überwachung Bugs String