Question

我正在创建一个动画，绘制像“O - O”形状的画布。动画首先应该动画绘制左边的圆圈，然后是右边的圆圈，最后是两者之间的连接。

我可以绘制一个圆圈，但我想知道如何逐个绘制这三个元素，而不是将它们中的三个一起绘制。

伪代码：

window.onload = draw;

function draw(){
drawcircle();
}

function drawcircle(){
draw part of circle
if( finish drawing){
clearTimeout
}
else{
setTimeout(drawcircle());
}

但是，如果我先在draw（）函数中运行另一个drawcircle函数。两个圆圈同时绘制而不是一个一个地绘制。有没有方法逐个绘制每个元素？非常感谢

Answer 1

您可能真正想要使用的是requestAnimationFrame。然后，您可以完全省略setTimeout。 http://paulirish.com/2011/requestanimationframe-for-smart-animating/是一篇很棒的博文，可以帮助您入门。

Answer 2

你想要的是回调：

Circle(ctx, 50, 50, 25, 1000, function () {       // animate drawing a circle
  Circle(ctx, 150, 50, 25, 1000, function () {    // then animate drawing a circle
    Line(ctx, 75, 50, 125, 50, 1000, function(){  // then animate drawing a line
      alert('done');
    });
  });
});

以下是圆形和线条动画图的简单实现：

function Circle(context, x, y, radius, dur, callback) {
  var start = new Date().getTime(),
      end = start + dur,
      cur = 0;

  (function draw() {
    var now = new Date().getTime(),
        next = 2 * Math.PI * (now-start)/dur;

    ctx.beginPath();
    ctx.arc(x, y, radius, cur, next);
    cur = Math.floor(next*100)/100; // helps to prevent gaps
    ctx.stroke();

    if (cur < 2 * Math.PI) requestAnimationFrame(draw);  // use a shim where applicable
    else if (typeof callback === "function") callback();
  })();
}

function Line(context, x1, y1, x2, y2, dur, callback) {
  var start = new Date().getTime(),
      end = start + dur,
      dis = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
      ang = Math.atan2(y2-y1, x2-x1),
      cur = 0;

  (function draw() {
    var now = new Date().getTime(),
        next = Math.min(dis * (now-start)/dur, dis);

    ctx.beginPath();
    ctx.moveTo(x1 + Math.cos(ang) * cur, y1 + Math.sin(ang) * cur);
    ctx.lineTo(x1 + Math.cos(ang) * next, y1 + Math.sin(ang) * next);
    cur = next;
    ctx.closePath();
    ctx.stroke();

    if (cur < dis) requestAnimationFrame(draw);  // use a shim where applicable.
    else if (typeof callback === "function") callback();
  })();
}

这是一个有效的（仅限webkit）演示：http://jsfiddle.net/QSAyw/3/

如何在HTML5 Canvas上下文中逐个执行不同的动画

2 个答案: