javascript - 我可以为弧的结束角度设置动画吗？

Question

我正在尝试使我的弧的结束角度从 X 变为 Y。

这就是我所拥有的：http: //jsfiddle.net/97dUJ/

我可以做：

var endAngle = 0 * Math.PI;

动画到：

var endAngle = 0.5 * Math.PI;

不只是跳到那个角度，而且实际上是动画，很简单，比如 easeInOut 或其他东西......这可能吗？谢谢！

Answer 1

您可以为 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 为属性设置动画

Answer 2

它很容易做到，你只需要添加一个setTimeout或requestAnimationFrame并增加你想要乘以结束角度的值。

现场演示

 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();
​