서클 애니메이션

Question

누군가가 저 캔버스로 조금 나를 도울 수 있습니까? 나는 그것을 배우고 있고, 그릴 수 없으며, r이 100이되면 0 애니메이션으로 돌아갑니다. 그래서 어떤 종류의 확대/축소 이미지. 내가 그것을 반경은 다시 0으로 즉시 간다 (100)에 도달 할 때 thath 캔버스 지금이 애니메이션을 적용 할 수 있습니다 다음은 100

다시 어떻게되는지 이제

<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> 

:

는이 같은 원을 그립니다

감사

Answer 1

http://www.digitalmedia.cz/shared/clanky/438/graf.gif

은 그 값이에가는 것을 이용에 걸릴 수 있습니다 수학 부비동 기능에서 봐한 다음 추가로 훨씬 더 역동적 인 느낌 간단한 사인 완화를 얻고있다이 방법으로 각

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 

0 사이 PI에 대한 0로 돌아갑니다. 여기

을위한 작은 바이올린 당신 http://jsfiddle.net/rezoner/6acF9/

당신은 시간에 linearMod의 기초를 필요 없다 - 당신이 원하는 슬라이더 컨트롤 또는 무엇이든에 할당 할 수 있습니다.