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

Answer 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).

Answer 2

In thewildernessdowntonwn, I think birds have been animated using svg and some javascript to run away from the mouse (because everybody know mouses can eat birds :) ).

I think, in this "transitions moment" javascript/css3 could be very helpful for simple animation as something appear or move one way and another. It's also a bit complicated to use animations since Mozilla and Opera only support css3 transition and no animation for moment.

Wait, it's still possible to make some hard animation but you will have to play hardly with transition transform and sometimes transform origin. You can have some good informations there : http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

The good point with svg is this is build to be animated more like a "traditionnal flash animation" and it can be controled by javascript and css3. Javascript is becoming more and more powerfull since all "modern browsers" are fighting on test like sunspider test. So you can do a lot with Javascript, I think it won't take long until a wysiwyg editor will output a clean css3 code (I think adobe is on its way right ?).

On the other hand there are these technologies call WebGL, it allow you by using html5 canvas and some serious javascript to write 2D and 3D application that allow you to do some amazing stuff that can use the power of GPU.

I hope it helped you to see through those emerging technologies.

Answer 3

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

Answer 4

You could check out processingjs which uses canvas for 2d and 3d visualizations. I have done a small visualization with processingjs and it is fairly easy to get some good results.

The advantage of using processingjs is that your animation would not only run in the browser but also in native processing tools.

Answer 5

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/