0

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

我可以画一个圆圈，但我想知道如何将三个元素一个一个地画出来，而不是把三个元素画在一起。

伪代码：

window.onload = draw;

function draw(){
drawcircle();
}

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

但是，如果我在 draw() 函数中首先运行另一个 drawcircle 函数。两个圆圈是同时绘制的，而不是一个一个地画。有什么方法可以一一绘制每个元素吗？非常感谢

4

2 回答 2

0

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

于 2013-01-14T15:01:00.470 回答
0

你想要的是回调：

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/

于 2013-01-14T17:42:26.440 回答