Christian Heilmann

Posts Tagged ‘animation’

Animating with canvas and creating CSS3 animations with JavaScript

Monday, September 5th, 2011

Yesterday we went to a cool park in Krakow, Poland where they have all kind of physics experiments for kids (and me):

Physics Park exhibits

One of the things that always fascinated me was the optical illusion of non-concentric circles turning into a 3D cone. Take the following picture:

non-concentric circles

And then rotate it and you see what I mean (video on screenr).

Now, coming back (like any other kid) I wanted to recreate this for myself, and it is actually pretty easy in HTML5 canvas. If you get the embed below, then click the play button to see the result.

Check the source code. In essence all you do is paint a number of concentric circles with alternating black and white colouring and you decrease their radius. Instead of keeping the centre of the circles the same you move it back forth with a sine wave.

The animation works simply by rotating the canvas around the centre – no need to calculate the rotation in the loop.

This is what also ailed me about this: as the main image doesn’t change and we simply rotate the canvas, there is no need for the painting loop in the animation. Although the performance seems to be fine (at least here on this Macbook Air), I am pretty sure that the animation without the calculated circles will be smoother and less resource hungry. That’s why I painted the circles in one canvas and copy it into the animated one as an image. You can see the two canvases (the painting one in lighter grey) in this demo. Again, if you get the embed below, then click the play button to see the result.

The next step was to take the advice that everybody tells you right now and think about CSS animation as it is hardware accelerated and much better (citation needed, but that is the impression that I get). As all I am doing is to rotate a canvas around itself, it seems to be a good idea to do that. So, in the next example I animate with CSS and only use canvas for painting:

Smooth! I like it. What I don’t like is that now it does nothing in Opera for example. The other thing that annoys me is that the CSS is ridiculously verbose as I have to repeat all the animation information and keyframes for each browser with different prefixes.

That’s why I wanted to see if I can use CSS animation when it is supported and create the animation on the fly. That can be done but it is not that easy. Check out the result.

This seems to work nicely, try it in Opera and in other browsers to see the differences and get information what kind of animation was used. If I used transformation instead of animation it would even be easier. As it stands now, you can’t access, create and change keyframes that easily. this post has some more info on the issue and Joe Lambert did another showcase. Makes you wonder if we shouldn’t create an easier bridge between JS and CSS animations.

Google’s playing with balls again – pretty but still no HTML5

Monday, February 7th, 2011

As just announced – the Google IO conference registration is open and they have created a very cool countdown animation:

Google I/O

In the blog post they describe the cool countdown as HTML5:

If you liked our HTML5 countdown, stay tuned for more surprises. We’ll keep you posted on the latest developments for Google I/O 2011 at the website, on Twitter (@Googleio) and Google Buzz. Get your tickets early—last year we sold out in record time!

Whilst awesome, there is not much new HTML in there right now. This time there is no need for beauitfying – the code is not at all minified or packed and includes comments – which I love, thanks guys! Seems most of the work was done by Matt King and the balls use the box2D physics engine.

Strangely enough, however it does not use the CANVAS tag for the animation (as box2d does), but instead creates images which get moved around. I guess this is a performance issue, but seeing that this MBA has its fan running after half a minute of the countdown it didn’t help too much.

Images created by the script on the Google IO site

There is also no sign of any of the new semantic HTML elements in the source – instead of header, section and footer there are DIVs with IDs. There’s a NOSCRIPT element telling people to go to to download a better browser and a screenshot of the animation if it doesn’t work for you. This is a good way of getting people excited but I don’t know why you would need a NOSCRIPT when you generate all the images of the balls anyways. Just replace this message when the page loads.

Just setting the record straight here, thanks for keeping the source open, Google!

TTMMHTM: 8 bit lego animation, blind phreaker, code collaboration, uk postcodes and SVG for IE

Monday, August 24th, 2009

Things that made me happy this morning:

TTMMHTM: Mario Bento, YUI3, Accessibility Interview, wearable computing pulp fiction typography and live carbon of the UK

Tuesday, July 21st, 2009