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