圆形动画

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 - 你可以把它分配给你希望一个滑块控件或什么的。