Javascript ist Toll!

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

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.

-

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.