Animation options HTML5 Canvas/CSS3/jQuery

Question

I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery.

One of the ideas floating around is of flying birds, character animation and 'tween'-like animation sequences. I'm a flash dev by background so all of this is second nature via Flash's timeline based motion tween system so i'm wondering just what is possible with new emerging technologies like HTML5 Canvas, CSS3 and jQuery? How adept are these at tween like animation? What's a good starting point to read up on?

For example the flying birds at http://www.thewildernessdowntown.com/ are amazing, they appear to be 3d, variable direction, speed, rotation, flap, speed. In Flash could achieve this with relative ease, creating set piece animations as movieclips, generating these on the stage and moving them around in tweenlite at various speeds or even in PV3D but i've next to no idea how this would be achieved on the canvas.

So in short, ideas on how the above was achieved, good reading material on this type of animation outside of flash and any general tips you might have would be much appreciated.

Thanks

Solution 1

You have three animation options in "HTML5": Canvas, SVG and CSS Animations (as well as good old Javascript animation). Which one you use depends on what you're trying to accomplish and which browsers you want them to run on.

If you're trying to target mobile, for example, CSS animations are your only choice because Canvas is too slow in general, and Android didn't have SVG until honeycomb. Also a bunch of SVG capabilities are not enabled on iOS yet (e.g. animated text paths).

Here's my intro presentation to CSS animations and also an introduction to our Sencha Animator tool, which is out in alpha.

For desktop Canvas is pretty awesome - although it really only works excellently in Chrome 10 and IE9 - Safari can be a bit slow particularly as the number of animated elements climbs and it doesn't exist in IE7/8 (and I haven't tested FF4 yet).

Solution 2

There's a little demo about writing an animated starfield using html5 and javascript. Check out the javascript code in this page.

Solution 3

The birds animation is done using an algorithm called Boids. Boids is unique in that it has a flocking/swarm/school like behavior like what birds and fish do best.

• You might want to check out the description of the Boids by the inventor Chris Reynolds: Chris Reynolds - Boids

• Here is a script on github that may help you: https://github.com/nuterian/Flocking

• Here is a demo: http://nuterian.github.io/Flocking/

Comments

[dg85]

That's perfect thanks. I've equally been looking at Grant Skinner's js timeline control and some of his experiments in bitmap sequencing but this seems a lot more mature even as an alpha release.

[Subhajit]

Thanks for this, its great :)