Javascript ist Toll!

Tween Beispiele

Das Tween Objekt

Ich vertiefe hier noch einmal die Verwendung meines Tween Objektes. Hier zeigt sich, wie einfach und effektiv es sich nutzen lässt. Der Code um eine Animations zu erzeugen ist sehr kurz und wie ich finde auch übersichtlich.

Auf der Seite ist ein Animationsobjekt, das mit zwei Animation erzeugt wurde. Mit Hilfe eines Formulares können einige Parameter verändert und diese Animationen in unterschieldichster Weise gestartet werden.

Beispielcode

Der komplette Code ohne Steuerungselemente und Ausgabe, sieht so aus

function main() { // wird onload aufgerufen (helper.js)
	var tween = new Tween();
 
	_('t1').className = 'tween';
 
	// Das erste Animationsobjekt Hintergrundfarbe wird geändert
	var anim = {
		callback: function(e) {
			// wir starten mit der rewind Funktion
			// deshalb von schwarz auf weiss
			_('t1').style.backgroundColor = getColor(e.value, '000000', 'ffffff');
		}, 
		transition: Ease.strongEaseInOut, 
		duration:500
	};
 
	tween.animation(anim);
 
	// Das zweite Animationsobjekt
	// die callback Funktion wird überschrieben 
	// und jeweils ein start und Endwert für die Größenänderung ermittelt.
	anim.start = 250
	anim.end = _('t1').offsetWidth;
	anim.callback = function(e) {_('t1').style.width = e.value + 'px'};
 
	tween.animation(anim);
}

Damit die Animationen auch aufgerufen werden können, braucht es noch eine Steuerung. In dem Fall über Formularbutton.

Der Button mit der ID 'b1' (Text: Effekt 1) wird mit einem onclick Event erweitert. Dort wird die Animation 0 mittels der Methode getAnimation() aus dem Tween Objekt geholt und die entsprechenden Werte aus dem Formular an das Easing Objekt (transition) und die Zeitdauer (time) übergeben. Dann, je nach Status des Ease Objektes, entweder die rewind() oder die pause Methode aufgerufen. Das ganze entsprechend mit dem zweiten Animationsobjekt und dem Button 'b2' (Text: Effekt 2) wiederholt.

	_('b1').addEventListener('click', function() {
		var t = tween.getAnimation(0);
 
		t.setTransition(Ease[_('ease_1').value]);
		t.duration(_('time1').value);
 
		if(t.isReady()) t.rewind(); else t.pause();
	}, false);

setzen des Eventlistener um die Animation 0 zu starten

Beispiel

Das ganze in Aktion.
Die Animationen werden über die Formularbutton gesteuert. Die Statusanzeigen zeigen die Werte während des Ablaufs der Animation an. Das Skript verwendet dafür den Eventlistener all, der bei jedem Event der Animationsobjekte aufgerufen wird.

anim.callback = function(e) {
	_('t1').style.backgroundColor = getColor(e.value, '000000', 'ffffff');
} 

anim.callback = function(e) {_('t1').style.width = e.value + 'px'};
anim.start = 250
anim.end = _('t1').offsetWidth;

Tween Status