Javascript中的顺序动画

Question

我正在尝试使用 HTML5 画布和 Javascript 创建动画。我对Javascript的先验知识很少。动画的第一部分是让一个圆圈“增长”，直到边缘接触到一个十字。然后十字架沿着圆的边缘移动。单独来说，这些部分工作正常，但由于我使用的是setInterval()，所以两个动画同时播放，而不是等待第一个完成后再开始第二个。

最简单的方法是什么？我很乐意使用 HTML 按钮，但 <button onclick="setInterval(aRot,30);">Next Step</button> 似乎不起作用。

​可以在http://jsfiddle.net/jtYkN/12/查看我的“可怕”代码奇葩

Answer 1

首先你真的想使用requestAnimationFrame 而不是setInterval。它专为动画制作。 According to paul irish..

我为什么要使用它？

浏览器可以将并发动画一起优化为单个 回流和重绘循环，导致更高保真度的动画。为了 例如，与 CSS 过渡或 SVG 同步的基于 JS 的动画 微笑。另外，如果您在不是 可见，浏览器不会继续运行，这意味着更少的 CPU、GPU、 和内存使用，从而延长电池寿命。

这就是我将如何实现你所说的

// 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();
  }
})();