Question

大家好我在SVG上制作动画时遇到麻烦，因为数学更复杂，我只想要它是3/4圈！

基本上我想在函数中传递一个百分比（0-100）并让线条动画到正确的位置。所以33％的人表示绿色的四分之一的中风，100％的绿色中的三分之一会显示出来。

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

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

所以＆＃34; 78＆＃34;将是100％和＆＃34; 314＆＃34;将是0％，但我迷失在如何映射这个！

CodePen Demo

感谢任何帮助！

Answer 1

0％：radius * 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 - 不是一个完整的圆圈

3 个答案: