0

「O-O」の形をしたキャンバスを描くアニメーションの作成に取り組んでいます。アニメーションは、最初に左側の円を描画し、次に右側の円を描画し、最後にそれらの間の接続をアニメーション化する必要があります。

円を描くことはできますが、3 つの要素を一緒に描くのではなく、3 つの要素を 1 つずつ描く方法を知りたいです。

疑似コード:

window.onload = draw;

function draw(){
drawcircle();
}

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

ただし、 draw() 関数の最初の後に別の drawcircle 関数を実行すると。両方の円は、1 つずつではなく同時に描画されます。各要素を1つずつ描画する方法はありますか? どうもありがとう

4

2 に答える 2

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 に答える
0

おそらく実際に使用したいのは、requestAnimationFrame です。その後、setTimeout を完全に除外できます。http://paulirish.com/2011/requestanimationframe-for-smart-animation/は、始めるのに役立つ素晴らしいブログ投稿です。

于 2013-01-14T15:01:00.470 に答える