使用jQuery/HTML5爲一個圓圈設置動畫

對於個人項目，我打算製作一個計時器應用程序（用於控制撲克盲表）。我知道市場上已經有幾種解決方案，但由於原因太長而無法進入，我們需要一個定製的系統。雖然系統的輸出模板最終將由最終用戶定義，但我們希望包含一個小部件，該小部件顯示隨着時間的推移會變成動畫的小圓圈。這裏是工作示例的圖示，顯示了黃色圓圈，我們想達成的目標（或類似的東西，反正）：使用jQuery/HTML5爲一個圓圈設置動畫

How to animate the circle?

我的問題是，如何將如下圖所示一個代碼動畫使用jQuery或原始HTML5/CSS3動畫？這是針對使用jQuery的Web應用程序，所以我沒有其他庫選項可供使用。

高級謝謝！

來源

2011-04-22 BenM

如果您可以使用HTML5，畫布可能是您最好的選擇。 Mozilla在繪製弧上有一些體面的tutorials。這應該足以讓你開始。

var canvas = document.getElementById('canvasid'), 
    width = canvas.width, 
    height = canvas.height, 
    ctx = canvas.getContext('2d'); 

function drawTimer(deg) { 
    var x = width/2, // center x 
     y = height/2, // center y 
     radius = 100, 
     startAngle = 0, 
     endAngle = deg * (Math.PI/180), 
     counterClockwise = true; 

    ctx.clearRect(0, 0, height, width); 
    ctx.save(); 

    ctx.fillStyle = '#fe6'; 

    // Set circle orientation 
    ctx.translate(x, y); 
    ctx.rotate(-90 * Math.PI/180); 

    ctx.beginPath(); 
    ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise); 
    ctx.lineTo(0, 0); 
    ctx.fill(); 
} 

setInterval(function() { 

    // Determine the amount of time elapsed; converted to degrees 
    var deg = (elapsedTime/totalTime) * 360; 

    drawTimer(deg); 

}, 1000);

來源

2011-04-22 15:16:00 scurker

謝謝，這是一個很好的開始！ – BenM 2011-04-22 17:09:52

我想到的第一個解決方案是html5 canvas的實現。從上面的例子中可以清楚地看到我們正在談論移動設備，所以我無法分辨手機瀏覽器的屏幕支持。 developer.mozilla.org提供sufficient documentation。使用畫布來實現這種倒計時應該是非常簡單的任務。祝你好運。

來源

2011-04-22 14:22:54 Zlatev

在HTML5中，您可以在畫布中繪製。例如：

// Create the yellow face 
context.strokeStyle = "#000000"; 
context.fillStyle = "#FFFF00"; 
context.beginPath(); 
context.arc(100,100,50,0,Math.PI*2,true); 
context.closePath(); 
context.stroke(); 
context.fill();

Link

來源

2011-04-22 14:23:36 Icebob

HTML5畫布圓弧指令(MDN)可能是你在找什麼。隨着時間的推移減少結束角度，讓你的計時器減少。

來源

2011-04-22 14:31:00 ballpointcarrot