Question

I’m trying to create an animation using HTML5 canvas and Javascript. I have very little prior knowledge of Javascript. The first part of the animation is to make a circle ‘grow’ until the edge touches a cross. The cross then moves along the edge of the circle. Individually, these parts work fine but, as I’m using setInterval(), both animations play at the same time rather than waiting for the first to finish before starting the second.

What would be the easiest way to do this? I would be happy using HTML buttons, but <button onclick="setInterval(aRot,30);">Next Step</button> doesn’t seem to work.

​My ‘orrible ‘odgepodge of code is viewable at http://jsfiddle.net/jtYkN/12/

Answer 1

First off you really want to use requestAnimationFrame rather than setInterval. Its made specifically for animations. According to paul irish..

Why should I use it?

The browser can optimize concurrent animations together into a single
reflow and repaint cycle, leading to higher fidelity animation. For
example, JS-based animations synchronized with CSS transitions or SVG
SMIL. Plus, if you’re running the animation loop in a tab that’s not
visible, the browser won’t keep it running, which means less CPU, GPU,
and memory usage, leading to much longer battery life.

Heres how I would implement what your talking about

// all credit to paul irish on this part
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


function growCircle () {
  // code to make the circle bigger
}


function rotateCross() {
  // code to make the cross rotate
}

(function animate(){
  requestAnimFrame(animate);
  if ( /* code to tell if the circle has finished growing */ ) {
    rotateCross();
  } else {
    growCircle();
  }
})();