201321Feb

Collie: Weitere Bibliothek für JavaScript-Animationen

Für die Animation von HTML5-Elementen auf Canvas-Basis eignen sich fertige JavaScript-Bibliotheken wie KineticJS, die bereits mit diversen Funktionen ausgestattet sind. Dazu zählen beispielsweise Ebenen, Szenen, Presets für Animationen oder physikalische Eigenschaften wie Reibung und Gravitation. Ein ähnliches Framework steht nun auch mit Collie zur Verfügung, das ebenfalls mit den genannten Funktionalitäten ausgestattet ist.

Collie - High Performance Animation Library for Javascript

So lassen sich mit Collie Rechtecke, Bilder oder auch Sprites animieren. Dabei stehen etliche Timer (Repeat, Cycle, Transition, Delay, Queue, Timeline) zur Verfügung, mit denen sich die unterschiedlichsten Szenarien umsetzen lassen. Ein Beispiel für eine einfache Rechteck-Animation:

  • var layer = new collie.Layer({
  • width : 300,
  • height : 300
  • });
  •  
  • var box = new collie.DisplayObject({
  • width : 50,
  • height : 50,
  • x : 10,
  • y : 10,
  • backgroundColor : 'red'
  • }).addTo(layer);
  •  
  • collie.Renderer.addLayer(layer);
  • collie.Renderer.load(document.getElementById("container"));
  • collie.Renderer.start();

Die Dokumentation findet sich hier. Ebenfalls interessant sein dürfte dieses Tool, mit dem sich individuelle Pfade für Hitboxen definieren lassen. Damit bietet Collie ein Äquivalent zu dem "ShapeFlag" von ActionScript 3, das für eine genauere Kollisionserkennung genutzt werden kann.

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