History of HTML / JavaScript animation

PRINCIPLES OF ANIMATION

In order to perform an animation, we need to:

    1. Clear the content of the canvas: this can be done using the ctx.clearRect(0, 0, canvasWidth, canvasHeight) method;
    2. Draw some shapes: use any of the drawing methods we have seen so far;
    3. Move the shapes: modify the position and/or orientation, size and color of the shapes;
    4. Repeat (go to step 1).

These are the basic steps for animating objects in a canvas. The order of the steps can be changed (i.e. you can move the shapes before drawing them), but, the principle is the same: clear-draw-move-repeat. Step 1 could be avoided if you redraw the whole canvas content during step 2.

 

BEFORE HTML5

Even before HTML5 and the introduction of the canvas element, people created HTML games. They used CSS backgrounds inside <div> elements, and used to change the CSS top, left, width and height properties of the divs to animate graphic images on the screen.

During the late 1990s and early 2000s, JavaScript became increasingly popular. The community created a first ‘umbrella term’ describing a collection of technologies used together to create interactive and animated Web sites – DHTML (Dynamic HTML). For example, check the games developed at this time by Brent Silby (they all use DHTML).

 

For animation, the setInterval(function, ms) and setTimeout(function, ms) methods were the only solutions. Both methods take a function as the first parameter, and a number of milliseconds as the second parameter.

The only difference is that the code provided to setInterval will run every n milliseconds whereas the code in setTimeout will run only once after n milliseconds (meaning that we will have to repeat a call to setTimeout at step 4 above).

AFTER HTML5

The methods  described above are now completed by a new method that comes with multiple advantages: the requestAnimationFrame API.

We will compare the old methods with the new one, and implement the same  example with each of them to highlight the differences.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s