动画圈笔划SVG-不是完整的圆

Question

嗨，大家好，我在将SVG上的笔触动画化时遇到了麻烦，我只希望它是一个3/4圆，因为数学更加复杂！

基本上，我想在函数中传递一个百分比（0-100），并使该行动画到正确的位置。 因此，有33％的人将以绿色显示笔画的四分之一，而100％的人将以绿色显示笔画的3/4。

我在这里有一支笔，您可以更改JS动画中的偏移量以获得不同的结果。

$(".percentage").animate({"stroke-dashoffset":"78"}, 3000);

因此“ 78”将为100％，“ 314”将为0％，但我迷失了如何绘制此图！

CodePen演示

任何帮助表示赞赏！

Answer 1

• 0％：半径* 2 * 3.14（318）
• 100％：0（整圈）（0）
• 75％：半径* 2 * 3.14 *（1-75％）（78）

所以你需要半径* 2 * 3.14 *（1-P * 75％）

例如，您需要318 * 0.5 * 0.75才能获得50％

这是给您的（希望很容易理解）功能

function percentage($percent) {
    var arc = 0.75;
    var radius = 50;
    var min = radius*2*3.14/*PI*/;
    var max = min*(1-arc);
    var multiplier = $percent/100;
    var position = min+(max-min)*multiplier;
    return position;
}

var offset = percentage(100);
$(".percentage").animate({"stroke-dashoffset":offset}, 3000);

Answer 2

var length= 314-78;
fuction toPercentage (number){
   return Math.round(((314-number)/length)*100);
}

Answer 3

这就是我做的...

https://codepen.io/anon/pen/kkWRPg

function percentage($percent) {
    var offsets = 314.1593 - ($percent * 2.3562);
  return offsets;
}

var offset = percentage(75);
$(".percentage").animate({"stroke-dashoffset":offset}, 3000);