Question

我正在尝试使用HTML5 canvas和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 ..

我为什么要使用它？

浏览器可以将并发动画优化为一个   回流和重绘周期，导致更高保真度的动画。对于   例如，基于JS的动画与CSS过渡或SVG同步   SMIL。另外，如果你在一个不是的标签中运行动画循环   可见，浏览器不能保持运行，这意味着更少的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();
  }
})();

Javascript中的连续动画

1 个答案: