201001Sep

Mashi: JavaScript-Toolkit für Timeline-Animationen

Für linear ablaufende Animationen (etwa in Slideshows, Produkt-Präsentationen oder E-Learning-Anwendungen) im Web bietet sich neben Flash der Einsatz von JavaScript an. So können beispielsweise längere Texte in mehrere Bereiche aufgeteilt werden, die per Klick nacheinander angesehen werden können. Auch Geschichten lassen sich durch lineare Abläufe oder Bilderfolgen in HTML erzählen.
Ein aktuelles Toolkit, mit dem sich solche Anwendungen in JavaScript entwickeln lassen, stellt Mashi dar. Dieses Projekt von Uli Preuss und Alp Uçkan soll die Umsetzung von JavaScript-Animationen, die auf Zeitleisten (Timelines) basieren, vereinfachen.

Mashi - JavaScript Timeline Toolkit

Das Mashi-Toolkit steht als Paket zum Download bereit und kann sofort eingesetzt werden. Die Bibliothek kommt mit einem eigenen Namespace, so dass es auch in Kombination mit anderen Frameworks eingesetzt werden kann. Ein Mashi-Projekt unterliegt einer bestimmten Modul-Architektur, so dass die eigentliche Logik für die Animationen in einer separaten Datei ("app.js") platziert ist. Ein Beispiel:

  • app.add(2000, function() {
  • app.set({
  • html: 'Ich bin ein Mashi-Projekt.',
  • style: {
  • backgroundColor: '#123456'
  • }
  • });
  • });
  •  
  • app.add(1000, function() {
  • });

Die Einstellung "2000" in Zeile 1 bewirkt also, dass die zweite Funktion in Zeile 10 nach 2 Sekunden durchgeführt wird. So können sehr einfach sequentielle Präsentationen erstellt werden. In der Galerie finden sich erweiterte Beispiele und Infos gibt es in der Dokumentation.

Kommentare

Don schrieb am 04.09.2010 #1

recht interessant müsste man mal ausprobieren..

Matthias schrieb am 04.09.2010 #2

Ja, ich werde es bei der nächsten Gelegenheit auch einmal ausprobieren. Es sieht auf jeden Fall vielversprechend aus.