我可以动画一个圆弧的结束角度吗？

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为动画