如何为SVG路径设置动画弧？

我想根据已批准的答案为SVG路径创建动画 - How to calculate the SVG Path for an arc (of a circle) 我从该答案复制了代码并仅添加了setInterval函数。但动画是错误的。我的目标是绘制（动画）路径为正常的圆圈。小提琴 - https://jsfiddle.net/alexcat/64w2hc31/如何为SVG路径设置动画弧？

谢谢。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
    return { 
 
    x: centerX + (radius * Math.cos(angleInRadians)), 
 
    y: centerY + (radius * Math.sin(angleInRadians)) 
 
    }; 
 
} 
 

 
function describeArc(x, y, radius, startAngle, endAngle){ 
 
    var start = polarToCartesian(x, y, radius, endAngle); 
 
    var end = polarToCartesian(x, y, radius, startAngle); 
 

 
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
    var d = [ 
 
     "M", start.x, start.y, 
 
     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
 
    ].join(" "); 
 

 
    return d;  
 
} 
 

 
    var i = 0; 
 
    setInterval(function(){ 
 
    i++ 
 
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 270)); 
 
    if (i === 360) { 
 
     i = 0; 
 
    } 
 
}, 10);

svg { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<svg> 
 
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" /> 
 
</svg> 
 

 
<script src="https://d3js.org/d3.v3.min.js"></script>

来源

2017-05-02 alex k

describeArc(150, 150, 100, i, 270)存在一种问题，并将其更改为describeArc(150, 150, 100, 0, i)，并呼叫clearInterval完成后。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
    return { 
 
    x: centerX + (radius * Math.cos(angleInRadians)), 
 
    y: centerY + (radius * Math.sin(angleInRadians)) 
 
    }; 
 
} 
 

 
function describeArc(x, y, radius, startAngle, endAngle){ 
 
    var start = polarToCartesian(x, y, radius, endAngle); 
 
    var end = polarToCartesian(x, y, radius, startAngle); 
 

 
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
    var d = [ 
 
     "M", start.x, start.y, 
 
     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
 
    ].join(" "); 
 

 
    return d;  
 
} 
 

 
    var i = 0; 
 
    var intervalId = setInterval(function(){ 
 
    i++ 
 
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, i)); 
 
    if (i === 360) { 
 
     clearInterval(intervalId); 
 
    } 
 
}, 10);

svg { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<svg> 
 
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" /> 
 
</svg> 
 

 
<script src="https://d3js.org/d3.v3.min.js"></script>

来源

2017-05-03 01:34:05 arlendp

describeArc（150，150，100，I，270）此更改为describeArc（150，150，100，I，360）

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 
 

 
    return { 
 
    x: centerX + (radius * Math.cos(angleInRadians)), 
 
    y: centerY + (radius * Math.sin(angleInRadians)) 
 
    }; 
 
} 
 

 
function describeArc(x, y, radius, startAngle, endAngle){ 
 
    var start = polarToCartesian(x, y, radius, endAngle); 
 
    var end = polarToCartesian(x, y, radius, startAngle); 
 

 
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
 

 
    var d = [ 
 
     "M", start.x, start.y, 
 
     "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
 
    ].join(" "); 
 

 
    return d;  
 
} 
 

 
    var i = 0; 
 
    setInterval(function(){ 
 
    i++ 
 
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 360)); 
 
    if (i === 360) { 
 
     i = 0; 
 
    } 
 
}, 10);

svg { 
 
    height: 1000px; 
 
    width: 1000px; 
 
}

<svg> 
 
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" /> 
 
</svg> 
 

 
<script src="https://d3js.org/d3.v3.min.js"></script>

来源

2017-05-02 10:48:13

如何为SVG路径设置动画弧？

回答

相关问题