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.

Tags: , , ,

One Response to “Simplifying animation with CollieJS (plus, a dancing reindeer!)”

  1. Rachel Nabors December 20, 2012 at 9:15 am #

    This looks like a decent ployfill for IE’s crappy animation support. With a little yepnope, I could put together a full length animation for all browsers. Thanks for the review! I’ll be sure to play with this over the holidays.

Leave a Reply