進度欄動畫

Question

我想創建一個進度條，該進度條遵循我的jquery示例中概述的代碼的路徑：

Jsfiddle： http : //jsfiddle.net/42a7s5nt/13/

context.beginPath();
context.moveTo(85, 161);
context.lineTo(245, 161);
context.quadraticCurveTo(310, 145, 310, 90);
context.quadraticCurveTo(300,20,230,20);
context.lineTo(85, 20);
context.quadraticCurveTo(20,34,20,90);
context.quadraticCurveTo(35,160,85,160);
context.lineWidth = 30;
context.strokeStyle = '#db1e33';
context.stroke();

如何將這個條動畫化為百分比/進度條？ 它從左下方開始顯示為紅色，並逆時針旋轉。 我已經看到了各種示例，但是由於它們基於使用pi或直線的徑向示例，因此我無法實現它們。

我本質上是想根據百分比為繪制路徑設置動畫。

任何幫助，將不勝感激。

Answer 1

@GameAlchemist有一個很好的簡化方法，即在每側使用半圓形而不是Q曲線。 這是因為圓的周長很容易計算：2 * PI *半徑。 Q曲線的周長更難以計算：在曲線上繪制100個以上的點並測量這些點所覆蓋的總距離。

反過來，您可以輕松計算出路徑的總長度。 如果要讓進度條從0％到100％均勻顯示，則總長度至關重要。

這個想法是要顯示2條線和2個半圓形所需要的數量，以表示完成百分比。

示例代碼和演示： http : //jsfiddle.net/m1erickson/qbapv8ws/

// calculate the total path length
var PI=Math.PI;
var radius=50;
var circumference=2*PI*radius;
var lineLeft=100;
var lineRight=200;
var lineWidth=lineRight-lineLeft;
var totalLength=circumference+lineWidth*2;

然后，您可以使用以下計算以及完成百分比來繪制進度條：

var lineTop=100;
var lineBottom=lineTop+radius*2;
var lineVertMiddle=(lineTop+lineBottom)/2;


function draw(pct){
    var pctLength=totalLength*pct;

    // draw complete path in red
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.strokeStyle='red';
    ctx.beginPath();
    ctx.moveTo(lineLeft,lineBottom);
    ctx.lineTo(lineRight,lineBottom);
    ctx.arc(lineRight,lineVertMiddle,radius,PI/2,-PI/2,true);
    ctx.lineTo(lineLeft,lineTop);
    ctx.arc(lineLeft,lineVertMiddle,radius,PI*3/2,PI/2,true);
    ctx.stroke();

    // draw percent path in green
    ctx.strokeStyle='green';
    ctx.beginPath();
    ctx.moveTo(lineLeft,lineBottom);

    // bottom line counterclockwise
    if(pctLength>0){
        var x=Math.min(pctLength,lineWidth);
        ctx.lineTo(lineLeft+x,lineBottom);
        pctLength-=x;
    }
    // right arc
    if(pctLength>0){
        var sweepAngle=Math.min(PI,PI*pctLength/(circumference/2));
        ctx.arc(lineRight,lineVertMiddle,radius,PI/2,PI/2-sweepAngle,true);
        pctLength-=Math.min(pctLength,circumference/2);
    }
    // top line
    if(pctLength>0){
        var x=Math.min(pctLength,lineWidth);
        ctx.lineTo(lineRight-x,lineTop);
        pctLength-=x;
    }
    // left arc
    if(pctLength>0){
        var sweepAngle=Math.min(PI,PI*pctLength/(circumference/2));
        ctx.arc(lineLeft,lineVertMiddle,radius,PI*3/2,PI*3/2-sweepAngle,true);
    }   

    ctx.stroke();
}