Simplifying animation with CollieJS (plus, a dancing reindeer!)

When I read about Collie in a recent issue of Appliness, I knew I had to give it a try. While you can do simple animations like this one easily in pure CSS, something about Collie is appealing — it renders in canvas or DOM, it’s tested for performance, and it’s encouraged as a solution on mobile devices. Plus, it has image optimization for retina display (how do you like them apples?).

Unlike, oh, every other HTML5 based visualization method I’ve learned ever (I’m looking at you d3), Collie was very, very easy to get up and running. The naming makes sense, and the settings are fairly intuitive:

var somethingToDisplay = collie.DisplayObject({
width: 600,
height: 600,
x: "center",
y: "center",
backgroundImage: "myImage"
});


Birth of a Dancing Reindeer

The only markup I needed was a container div for Collie to insert the canvas (<div id=”container”></div>). And of course, you’ll need to load Collie. The first step of the script is to add a layer for Collie to display upon:

var layer = new collie.Layer({
width : 600,
height : 400
});


Add images to ImageManager, so they’re easy to reference later:

collie.ImageManager.add({
"sky" : "animations/night-sky.jpeg",
"reindeer" : "animations/deer-sprite.png"
});

Add some display objects to the layer. The background is a simple flat sky background (although we could animate it if we wished). The reindeer is a sprite with 7 frames. I’m not an animator, so this is a cute clip art reindeer I moved around in PhotoShop.

var background = new collie.DisplayObject({
width : 600,
height : 400,
backgroundImage : "sky"
}).addTo(layer);

var deer = new collie.DisplayObject({
width : 280,
height : 456,
x: "center",
y: "center",
backgroundImage : "reindeer"
}).addTo(layer);

Make the deer dance by interacting with the Collie timer:

collie.Timer.cycle(deer, "18fps", {
from : 0,
to : 6, // 7 frames total
loop : 0
});


And then we start our engines:

collie.Renderer.addLayer(layer);
collie.Renderer.load(document.getElementById("container"));
collie.Renderer.start();

The piece de resistance:

Super fast, quite fun. I’m looking forward to seeing what people do with Collie.

The post Simplifying animation with CollieJS (plus, a dancing reindeer!) appeared first on Pam The Webivore.