www.1-4-you.net


Animats


Warning: The Mozilla Developer Network website employs emerging web standards that may not be fully supported in some versions of Microsoft Internet Explorer. You can improve your experience of this website by enabling JavaScript.

MDN has switched to Persona, a safe and simple way to sign in with just your e-mail address. Learn more about why Mozilla is using Persona.

Returning members: sign in with Persona and youll be connected to your MDN profile (all your information is still here).

New members: sign in with Persona first, then youll be able to set up your new MDN profile.

Since were using script to control canvas elements its also very easy to make (interactive) animations. Unfortunately the canvas element was never designed to be used in this way (unlike Flash) so there are limitations.

Probably the biggest limitation is that once a shape gets drawn it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer its running on.

These are the steps you need to take to draw a frame:

Shapes are drawn to the canvas by using the canvas methods directly or calling custom functions. In normal circumstances we only see these results appear on the canvas when the script finishes execution. For instance it isnt possible to do an animation from within a for loop.

We need a way to execute our drawing functions over a period of time. There are two ways to control an animation like this. First theres the setInterval and setTimeout functions which can be used to call a specific function over a set period of time (although requestAnimationFrame is recommended for these cases).

The second method we can use to control an animation is user input. If we wanted to make a game we could use keyboard or mouse events to control the animation. By setting eventListeners we catch any user interaction and execute our animation functions.

If you want the user interaction you could use the minor or the major version of our framework for animations.

In this example Im going to animate a mini simulation of our solar system.

Is MDN helpful to you? Please share your feedback with us. Or join our mailing list about improving MDN content.