201115Feb

jQuery: Animationen mit mehreren Triggern versehen

Einfache und lineare Animationen lassen sich in jQuery ohne großen Aufwand oder Plugins umsetzen. Auch aufeinander folgende Bewegungsabläufe können durch verkettete "animate()"-Aufrufe (Chaining) durchgeführt werden. Noch mehr Komfort bezüglich Animationsmöglichkeiten bieten Frameworks wie jsAnim oder Mashi, da sich hier gezielt Keyframes auf einer imaginären Zeitleiste platzieren lassen. Dadurch können Animationen schrittweise aufgebaut und animiert werden.
Damit sich eine solche Funktionalität auch in jQuery nutzen lässt, hat sich der Entwickler Faruk Ateş Gedanken über ein Plugin gemacht: Es sollte Code an bestimmten Stellen (Keyframes) ausführen und dabei auf die interne jQuery-Queue aufbauen. Zudem sollten die Keyframes einfach veränderbar sein und zudem unabhängig von der Hauptanimation gesteuert werden können. Aus diesen Vorgaben entstand schließlich da Plugin Runloop, in dem die Ideen vereint wurden.

jQuery Runloop Plugin

Durch die jQuery-Erweiterung kann also eine Dauer für eine komplexere Animation festgelegt werden, in der verschiedene Keyframes durch prozentuale Angaben definiert werden können. Erreicht die Animation einen Keyframe, wird der entsprechende Code ausgeführt. Ein simples Beispiel:

  • var schleife = jQuery.runloop();
  •  
  • schleife.addKey('25%', function(){ /* Code 1 */ });
  • schleife.addKey('50%', function(){ /* Code 2 */ });
  • schleife.addKey('75%', function(){ /* Code 3 */ });
  •  
  • schleife.play(2500);

Die einzelnen Funktionen werden also nacheinander innerhalb von 2500 Millisekunden ausgeführt. Die Schleife lässt sich übrigens auch anhalten, wie die Demo des Plugins zeigt. Die Dokumentation findet sich bei GitHub.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong