1

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

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

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

4

1 回答 1

1

首先，您真的想使用requestAnimationFrame而不是 setInterval。它专为动画制作。根据保罗爱尔兰..

我为什么要使用它？

浏览器可以将并发动画一起优化为单个回流和重绘循环，从而获得更高保真度的动画。例如，与 CSS 过渡或 SVG SMIL 同步的基于 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();
  }
})();
于 2012-07-10T15:54:12.463 回答