Javascript animations

javascript-animations

I know that it’s hard to explain what you can do just looping with javascript on a Html5 canvas but in this post I will show you 3 different ways to create a great javascript animation being careful of CPU performance.

Everything you need to know is that a good javascript animation needs to loop on a script updating coordinates of every object on the stage, and it should be fast enough to be perceived as a fluid movement.
We can move an object on the stage using this 3 methods:

  • setInterval ()
  • setTimeout ()
  • requestAnimationFrame ()

setInterval () method is dangerous for CPU performance because it calls continuously the loop function, but if the time to execute the code is longer than the interval,your browser could crash.
It happens because any browser executes any event putting the new one in a queue, but more longer is the queue and much more are the possibilities that CPU levels become unsustainable for every device.
Here it is an example of a setInterval () animation:

var testDiv = document.getElementById( 'testDiv' ),
i = 0;
// loop function
var loop = function () {

  // if margin left become 100px I set it again on 0px
  if ( i == 100 ) {
    i = 0;
  }

  // increasing testing div's margin left
  testDiv.style.marginLeft = i + 'px';
  i++;

}
// first init
loop ();

// loop is executed every 30 ms
var interval = setInterval( loop , 30 );

DEMO

You can create a nice animation also using setTimeout (), calling the loop function again and again preventing browser crashes. In this way any browser runs javascript interpreting it such as a simple loop based on its calculation speed, instead of a time loop that keeps adding tasks on its javascript events queue overcharging the CPU.
Here it is an example of a setTimeout () animation:

var testDiv = document.getElementById('testDiv'),
i = 0
timeout = null;
// loop function
var loop = function () {
  // if margin left become 100px I set it again on 0px
  if (i == 100) {
    i = 0;
  }
  // increasing testing div's margin left
  testDiv.style.marginLeft = i+'px';
  i++;

  // calling again the loop function every 10ms after the last loop
  timeout = setTimeout(loop,10);

}
// first init
loop ();

DEMO

The RequestAnimationFrame () method is a new javascript API that can make any animation simpler and more accurate. If you are using some of the methods above you can early encounter a lot of issues. If you are trying complex animations or you are just combining them with CSS3 animations, you are going to fail because you can not have the complete control over the setTimeout and setInterval methods:these methods were not made for the animation loops and so the framerate depends on your browser speed and it will not work not synchronously with any other kind of CSS3 animation or transition.
When you use this new API, you inform the browser that your code is running a loop animation and then it can keep the framerate up to 60 frame per second. Indeed for example, it can slow down or stop the framerate if the page loses the focus. Then if you are using CSS3 animations it could easily synchronize them with your javascript animation.
RequestAnimationFrame is not supported by old browsers like IE8 and IE7 but you can easily use a fallback (Paul Irish window.requestAnimationFrame fallback) to avoid this problem.
Check this examples to understand how does it work:

// every browser vendor use a prefix for this experimental API
window.requestAnimationFrame = window.requestAnimationFrame || // standard
window.mozRequestAnimationFrame || // firefox
window.webkitRequestAnimationFrame || // Chrome and Safari
window.msRequestAnimationFrame; // IE10

var testDiv = document.getElementById('testDiv'),
i = 0;
// loop function
var loop = function () {
  // if margin left become 100px I set it again on 0px
  if (i == 100) {
    i = 0;
  }
  // increasing testing div's margin left
  testDiv.style.marginLeft = i+'px';
  i++;
  // for every loop we need to pass the loop function to the requestAnimationFrame method
  window.requestAnimationFrame(loop);
}
// first init
loop();

DEMO

I have just realized a simple template to start a great javascript animation using all the methods above, the project is on github.

Download

Here other examples from my project:
Example1 – Bla Bla Bla
Example2 – box2d
Example3 – particles squares
Example4 – mouseover and click on Html5 canvas object

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>