Javascript ist Toll!

27. October 2012 - 20:54

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.

Tween Beispiel

inkl. etwas Text

Steuerung 1

Ease:
Der Effekt wird mit folgender Callbackfunktion aufgerufen:
anim.callback = function(e) {
	_('t1').style.backgroundColor = getColor(e.value, '000000', 'ffffff');
} 

Steuerung 2

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

Beide Effekte

parallel: reverse:

Tween Status

ähnliche Artikel

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

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

  • 3. September 2010 -- Tweening – Effekte mit Javascript (4)

    Tweening und Transition sind zwei Begriffe aus der...

  • 18. November 2011 -- LED Editor (1)

    LED Scroller Chareditor Dieses Skript dient zum...

Comments (0)
375 mal gelesen.

Noch keine Kommentare

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