动画圆描边 SVG - 不是一个完整的圆

Question

大家好，我在 SVG 上设置笔画动画时遇到问题，我只希望它是一个 3/4 圆，因为数学更复杂！

基本上我想在函数中传递一个百分比 (0-100) 并让线条动画到正确的位置。所以 33% 会以绿色显示四分之一的行程，100% 会以绿色显示 3/4 的行程。

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

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

所以“78”将是 100%，“314”将是 0%，但我不知道如何映射它！

CodePen Demo

感谢任何帮助！

Answer 1

0% : 半径*2*3.14 (318)
100% : 0（整圈）(0)
75% : 半径*2*3.14*(1-75%) (78)

所以你的结果需要半径*2*3.14*(1-P*75%)

例如50%需要318*0.5*0.75

这里是（希望它容易理解）函数给你

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);

动画圆描边 SVG - 不是一个完整的圆

Animating circle stroke SVG - Not a full circle

javascript

css

jquery

svg

jquery-animate