动画圆笔画SVG - 不是一个完整的圆答案

【问题标题】：Animating circle stroke SVG - Not a full circle动画圆笔画SVG - 不是一个完整的圆
【发布时间】：2017-01-16 09:39:13
【问题描述】：

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

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

我这里有一支笔，你可以在 JS animate 中改变偏移量来得到不同的结果。

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

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

CodePen Demo

感谢任何帮助！

【问题讨论】：

50% 的数字是多少？
314 为 50(半径)*2*3.14
而 78 只是因为 314/4
那么 50% 100/50 = 2。然后 392 / 2 给我 196。但如果我尝试使用 70% 就不同了，所以 100/70 = 1.42 然后 392/1.42 = 276 这是目测约 10%。当我的数字倒退时，我怎样才能让公式起作用！
改函数看结果codepen.io/anon/pen/kkWRPg

标签： javascript jquery css svg jquery-animate

【解决方案1】：

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

【讨论】：

【解决方案2】：

我就是这样做的……

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

【讨论】：

【解决方案3】：

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

所以你的结果需要 radius*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);

【讨论】：

我现在的问题是如何计算出 "/2" 50% 很容易 100/50 = 2 但对于 70% 却不能正确输出
至少对于您的示例，现在我正在查看您的评论代码。
我更改了您的代码并发布在答案中，请检查是否有帮助。