キャンバス上のスムーズなクリックイベントアニメーション

Question

私はファンのようなキャンバスにアニメーションを実装しようとしています。パスをクリックすると、画面のほぼ70％、2番目と3番目のパスが幅の15％になるはずです。

はここに私のコードです：

var canvas = document.getElementById('c'); 
var ctx = canvas.getContext('2d'); 


var el1 = { 
    lineWidth: 1, 
    fill: "blue", 
    points: [] 
}; 
var el2 = { 
    lineWidth:1, 
    fill: 'red', 
    points: [] 
} 
var el3 = { 
    lineWidth:1, 
    fill:'green', 
    points:[] 
} 
var paths = []; 
paths.push(el1); 
paths.push(el2); 
paths.push(el3); 


newPoint(50, 50, el1); 
newPoint(100, 20, el1); 
newPoint(100,180,el1); 


newPoint(50,50,el2); 
newPoint(90, 155,el2); 
newPoint(0, 165, el2); 

newPoint(50,50,el3); 
newPoint(0, 165, el3); 
newPoint(0,20, el3); 
draw(); 

function newPoint(x, y, path) { 
    path.points.push({ 
     x: x, 
     y: y 
    }); 
} 


function draw() { 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    for (p = 0; p < paths.length; p++) { 

     var path = paths[p]; 

     ctx.beginPath(); 

     ctx.moveTo(path.points[0].x, path.points[0].y); 

     for (pt = 1; pt < path.points.length; pt++) { 
      var point = path.points[pt]; 
      ctx.lineTo(point.x, point.y); 
     } 

     // 
     ctx.fillStyle = path.fill; 
     ctx.lineWidth = path.lineWidth; 
     ctx.fill(); 

    } 

} 
$('#redraw').click(function(){ 
    paths[0].points[2].y = 300; 
    paths[1].points[1].y = 300; 
    draw(); 
}); 

https://jsfiddle.net/kaggqf94/4/

私はこれが（代わりに、それらの三角形のテキストや画像といくつかの要素になります）、このアニメーションを実装するための最良の方法であるかどうかわからないです、どのようにしてアニメーションをより遅くする必要があるのか​​分かりません。私はこのためにすべてのコードを変更する必要があります。

アドバイスありがとうございます。

Answer 1

ここでは、青い部分が緑色の赤い部分が青い部分が大きな角度に等しい角度からそれぞれアニメーション化された「クロップドウェッジ」を描くことができるdraw()機能があります。

pctIncrementを減らしてアニメーションを遅くし、アニメーションを速くするには、pctIncrementを増やします。あなたの助けのための

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
ctx.textAlign='center'; 
 
ctx.textBaseline='middle'; 
 
ctx.font='24px arial'; 
 

 
var cx=cw/2; 
 
var cy=ch/2; 
 
var radius=250; 
 
var startAngle=-Math.PI/8; 
 
var totAngle=Math.PI*5/4; 
 
var currentPct=1/3; 
 
var currentColor='Blue'; 
 
var pctIncrement=Math.PI*2/6000; 
 

 
requestAnimationFrame(animate); 
 

 
function animate(time){ 
 
    draw(currentPct,currentColor); 
 
    currentPct+=pctIncrement; 
 
    if(currentPct>0.50){ 
 
     currentPct=1/3; 
 
     currentColor=(currentColor=='Blue')?'Red':(currentColor=='Red')?'Green':'Blue'; 
 
    } 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function draw(pct,color){ 
 
    var maxAngle=totAngle*pct; 
 
    var minAngle=(totAngle-maxAngle)/2; 
 
    var bsa,bea,rsa,rea,gsa,gea; 
 
    if(color=='Blue'){ 
 
     bsa=startAngle; 
 
     bea=rsa=bsa+maxAngle; 
 
     rea=gsa=rsa+minAngle; 
 
     gea=gsa+minAngle; 
 
    }else if(color=='Red'){ 
 
     bsa=startAngle; 
 
     bea=rsa=startAngle+minAngle; 
 
     rea=gsa=rsa+maxAngle; 
 
     gea=gsa+minAngle; 
 
    }else{ 
 
     bsa=startAngle; 
 
     bea=rsa=startAngle+minAngle; 
 
     rea=gsa=rsa+minAngle; 
 
     gea=gsa+maxAngle; 
 
    } 
 
    ctx.clearRect(0,0,cw,ch); 
 
    fillArc(bsa,bea,'blue'); 
 
    fillArc(rsa,rea,'red'); 
 
    fillArc(gsa,gea,'green'); 
 
    ctx.fillStyle=color; 
 
    ctx.fillText('Expanding',cx,cy-70); 
 
    ctx.fillText(color,cx,cy-40); 
 
} 
 

 
function fillArc(sa,ea,fill){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(cx,cy); 
 
    ctx.arc(cx,cy,radius,sa,ea); 
 
    ctx.closePath(); 
 
    ctx.fillStyle=fill; 
 
    ctx.fill(); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id='canvas' width=300 height=300></canvas>