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

Question

我试图让我的圆弧的结束 Angular 从 X 到 Y。

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

我可以做:

var endAngle = 0 * Math.PI;

动画:

var endAngle = 0.5 * Math.PI;

不只是跳到那个 Angular ，而是实际制作动画，简单易用，例如 easeInOut 或其他……这可能吗？谢谢!

Answer 1

您可以为 endAngle 属性设置动画，然后清除 Canvas 并使用最新值重新绘制圆弧，就像这样......

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