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
Tween Status
ähnliche Artikel
- 22. Juni 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...
4729 mal gelesen.
Noch keine Kommentare
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
überwachung Javascript Tool linux Browser Privatsphäre Bugs LED Scroller OOP String LED prototype google Firefox Datenschutz Wordpress Laufschrift Drag&Drop Animation about:config