Glatte Klick-Event-Animation auf Leinwand

Question

Ich versuche eine Animation in Canvas zu implementieren, so etwas wie ein Fan. Wenn Sie auf einen Pfad klicken, sollte dies fast 70% des Bildschirms gehen, der zweite und dritte Pfad sollte 15% der Breite gehen.

Hier ist mein Code:

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/

Ich bin nicht sicher, ob dies der beste Weg ist, um diese Animation zu implementieren (anstelle dieser Dreiecke werden einige Elemente mit Text und Bildern sein), Ich kann nicht herausfinden, wie ich die Animation langsamer machen sollte, ich denke, ich werde den gesamten Code dafür ändern müssen.

Jeder Rat wird helfen, danke!

Answer 1

Hier ist eine draw() Funktion, mit der Sie Ihre "abgeschnittenen Keile" mit den grünen, roten & blauen Teilen zeichnen können, die jeweils aus gleichen Winkeln zu einem großen Winkel animieren.

Sie können die Animation verlangsamen, indem Sie pctIncrement verringern und die Animation beschleunigen, indem Sie pctIncrement erhöhen.

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>