Question

我正在尝试让我的弧的结束角度从X到Y.

我可以制作：

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即可轻松增加想要将结束角度乘以的值。

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

我可以为圆弧的终止角设置动画吗？

2 个答案: