圓形動畫

Question

有人可以幫助我一點與那個畫布，我正在學習它，不能設法做一個圓圈，當r來到100它回到0動畫。所以它的某種縮放圖像。

我得出這樣一個循環：

<canvas id="myCanvas" width="578" height="200"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 70; 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.lineWidth = 5; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 
</script> 

現在怎麼現在我可以用帆布當半徑達到100它會立即返回0 thath這個動畫，然後再次進入100

感謝

Answer 1

看數學正弦函數http://www.digitalmedia.cz/shared/clanky/438/graf.gif

讓我們充分利用上，它的價值是要1然後回到0爲0和PI

var period = 500; // [miliseconds] 
var linearMod = Date.now() % period/period; // this goes from 0 to 1 
var mod = Math.sin(linearMod * Math.PI); // and here with simple easing we create 
             // bouncing 
var r = someRadius * mod;    // voila 

之間

角度通過這種方法，你額外獲得簡單的正弦寬鬆這感覺更加充滿活力。

這裏是一個小撥弄你http://jsfiddle.net/rezoner/6acF9/

你不必在時間基礎linearMod - 你可以把它分配給你希望一個滑塊控件或什麼的。