Four tips for an easier Canvas animation
What’s the most important thing about your company’s homepage? The gimmick, of course! Ok, maybe that’s not true. Maybe what’s really important is a pleasant design, professional message, and concise and accurate information—but a gimmick doesn’t hurt! We’re almost finished redesigning OUR web presence, and in addition to all those important pieces of a good website, we wanted to have something special that really demonstrates our technical prowess. Here’s what we came up with.
We want to show that putting in the effort to do things right the first time makes a big difference, and that’s what we’re about. There’s a big difference between teams who do things the “right way” and teams that build things “good enough for now”. Here’s how we represent this idea graphically:
Two paths lie before our imaginary biker: a challenging uphill gauntlet to the summit, and an easy ride around the base. The former represents the hard work and resultant rewards of good architecture, solid testing, and aggressive project management; the later is hacky duct-tape programming with no real QA process and minimal customer involvement.
As the bike climbs the mountain, the world gradually becomes more beautiful; flora blooms, the sun comes out, and vibrant colors coalesce into a portrait of the ideal day. But when the biker chooses the “easy” path, gloomy skies prevail, the clouds roll in, and storms arise on the horizon.
This was our vision, and with the help of the new canvas support in most modern browsers, we’ve made it something of a reality. What follows is the short list of recommendations I now feel qualified to give after the implementation of such a project. Heed these, and you too can have a spiffy bit of flair to make people sit up and notice you when they arrive at your digital home.
1) Pick an animation library
Of course, if you’re really hardcore, you could do all the animation yourself, from scratch, directly with the canvas API. I actually considered this at first; how hard could it be to specify coordinates on a 2-D plane and make images move to them in a coordinated manner? Well, it might not be HARD, but it can definitely be very tedious. Animation of any type requires somewhat repetitive tasks that are commonly reused, and an abstraction layer makes this go WAY faster. We used fabric.js for our little mountain-biking escapade, and it worked just fine, but after some additional exposure to other options, I think paper.js would be what I would choose if I were to do it over. A lot of what took up most of my time was defining the path and various angles the bike would have to appear at frame-by-frame, and paper.js has some great path-simplifying functions that would have been quite helpful.
2) Think in terms of what REALLY needs to be animated
My first pass at making our little bike travel up the mountain involved 1 bike image and 4 background images (each one a landscape involving the mountain, the sky, clouds, and the various stopping points along the way). The idea was that each checkpoint on the way up the mountain would have the background looking greener and more alive, and the images would fade into one another as the bike traveled up the mountain path. I did this by putting the 4 background images on the canvas at the same location and gradually adjusting their opacity from one to the next as the bike moved. This worked, but involved a lot of calculations to step the fading along proportionally to the bike’s travel speed, and the performance on Chrome quickly degraded (the background was a large image, and adding 4 of them to the canvas took time).
We realized quickly that since the background wasn’t really being animated, just fading in and out, that putting it directly on the canvas wasn’t truly necessary. We solved the performance issue by making the images smaller (jpg instead of png, and added some compression), and by placing them BEHIND the canvas and using jquery’s “fadeIn” and “fadeOut” methods to fade between them with little work on our part, leaving the actual canvas animation for the only really moving part of the scene (the bike).
3) Work smart, not hard.
The most tedious part of the whole process was moving the bike up the mountain. Since the mountainous terrain was a jagged path, the bike had to be moving at different angles, constantly changing direction and speed. At first I simply tried to do this frame by frame, specifying coordinates and adjusting them manually as necessary. This was very functional, but very tiring. Ultimately I realized that there was a simpler way. A straight line is easy to extrapolate all the coordinates along programmatically, so the trick we used was simply to break this complex path into multiple straight line segments. By manually positioning the image at the points where direction changed (maybe 5-8 points per path), we could use a script to divide the segment into a fixed number of frames between each point along a linear path (difference in x and difference in y). That saved my fingers a TON of typing.
4) Test in multiple browsers
All canvas implementations are not created equal. What worked just fine in FF ended up running the bike behind the mountain in Safari and running in almost choppy slow motion in Chrome. This is really a given on any project anymore, but you have to do your dedicated browser testing before you release things into the wild (and yes, our bike rides well on the iPhone, too).
Long story short, a little animation (gimmicky as it may seem) can add quite a bit of personality to an otherwise mostly informational web presence. As easy as it is now to make this kind of magic happen, there’s no reason not to consider adding that additional special something to your next product.