Wie animiert man den SVG-Pfad für einen Bogen?

Question

Ich möchte SVG-Pfad basierend auf genehmigten Antwort animieren - How to calculate the SVG Path for an arc (of a circle) Ich kopierte Code aus dieser Antwort und fügte nur setInterval-Funktion. Aber Animation ist falsch. Mein Ziel ist es, den Pfad als normalen Kreis zu zeichnen (zu animieren). Fiddle - https://jsfiddle.net/alexcat/64w2hc31/

Danke.

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>

Answer 1

gibt es ein Problem in describeArc(150, 150, 100, i, 270) und ändern Sie es in describeArc(150, 150, 100, 0, i) und rufen Sie clearInterval wenn es fertig ist.

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>

Answer 2

describeArc (150, 150, 100, i, 270) ändern, um dies zu 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>