我可以動畫一個圓弧的結束角度嗎？

Question

我試圖讓我的弧的終止角度，從X到Y.

這是我有：http://jsfiddle.net/97dUJ/

我可以做：

var endAngle = 0 * Math.PI; 

動畫到：

var endAngle = 0.5 * Math.PI; 

不僅僅是跳到那個角度，而且實際上是一個簡單的動畫，比如easeInOut或者其他東西......這可能嗎？謝謝！

Answer 1

它很簡單，你只需要添加一個setTimeout或​​並增加你想要乘以結束角度的值。

Live Demo

var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 
     var radius = 75; 
     var startAngle = 1.5 * Math.PI; 
     var curVal = 0; 
     var endAngle = 0 * Math.PI; 
     var counterClockwise = false; 

function animate(){ 
    if(curVal < 0.5){ 
     curVal+= 0.01; 
    } 
     endAngle = curVal * Math.PI; 
     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 15; 
     // line color 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    setTimeout(animate,30); 
} 

animate(); 
​ 

Answer 2

你可以動畫則endAngle屬性清除畫布和重繪最新值弧形，這樣的..

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var props = { 
    x : canvas.width/2, 
    y : canvas.height/2, 
    radius : 75, 
    startAngle : 0, 
    endAngle : 0, 
    counterClockwise : false 
} 

function drawArc() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    context.beginPath(); 
    context.arc(props.x, props.y, props.radius, props.startAngle, props.endAngle, props.counterClockwise); 
    context.lineWidth = 15; 

    // line color 
    context.strokeStyle = 'black'; 
    context.stroke();  
} 

TweenMax.to(props, 1, {endAngle: Math.PI * 2, yoyo:true, repeat:-1, ease:Quad.easeInOut, onUpdate:drawArc}); 

http://jsfiddle.net/B8XCw/8/

記：這是使用Tweenmax爲動畫