如何在HTML5 Canvas上下文中逐個執行不同的動畫

Question

我正在創建一個繪製類似「O-O」形狀的畫布的動畫。 動畫首先應該動畫來繪製左側的圓，然後是右側的圓，最後是兩者之間的連接。

我能繪製一個圓，但我想知道如何繪製三個元素，而不是一起繪製三個元素。

僞代碼：

window.onload = draw; 

function draw(){ 
drawcircle(); 
} 

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

但是，如果我先在draw（）函數運行後的另一個畫圓功能。兩個圓都是同時繪製而不是一個一個繪製的。有沒有任何方法可以逐一繪製每個元素？ 非常感謝

Answer 1

你想要什麼是回調：

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/

Answer 2

你可能真正想要使用的是requestAnimationFrame。然後你可以完全忽略setTimeout。 http://paulirish.com/2011/requestanimationframe-for-smart-animating/是一個很棒的博客文章，可以幫助你開始。