SVG动画：在绘制弧时为其设置动画

Question

I am drawing an Arc with SVG using the following snippet:

https://jsfiddle.net/e6dx9oza/293/

The starting and ending angle of the arc will be dynamically fed in when describeArc method is called to calculate the path.

Does anyone know how can I animate the arc as it gets drawn? Basically I want the arc to be drawn smoothly with a delay, instead of it getting drawn at one go as in the present case.

Answer 1

You question doesn't describe what you mean by "animate". Please think about that next time you ask a question.

I am going to assume you want the sector to open like a fan.

Here's one way to do it.

 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 arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", start.x, start.y, "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "L", x,y, "L", start.x, start.y ].join(" "); //console.log(d); return d; } function animateSector(x, y, radius, startAngle, endAngle, animationDuration) { var startTime = performance.now(); function doAnimationStep() { // Get progress of animation (0 -> 1) var progress = Math.min((performance.now() - startTime) / animationDuration, 1.0); // Calculate the end angle for this point in the animation var angle = startAngle + progress * (endAngle - startAngle); // Calculate the sector shape var arc = describeArc(x, y, radius, startAngle, angle); // Update the path document.getElementById("arc1").setAttribute("d", arc); // If animation is not finished, then ask browser for another animation frame. if (progress < 1.0) requestAnimationFrame(doAnimationStep); } requestAnimationFrame(doAnimationStep); } animateSector(100, 100, 100, 120, 418.25, 1000); 

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

 <svg> <path id="arc1" fill="green" /> </svg> 

Fiddle here: https://jsfiddle.net/e6dx9oza/351/