在画布上平滑单击事件动画

Question

我正在尝试在画布上实现动画，例如风扇。 当您单击某个路径时，这应该走近屏幕的70％，第二和第三条路径应走到宽度的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>