I draw Arc with SVG using the following snippet:

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

The starting and ending angles of the arc will dynamically move when describeArc is called to calculate the path.

Does anyone know how I can animate an arc when it is drawn? Basically, I want the arc to be smoothly drawn with a delay, instead of drawing it at a time, as in this case.

1 answer 1

Your question does not describe exactly what you mean by "animation."

I am going to assume that you want the sector to open to the final position.

Here is one way to do this.

 <style> svg { height: 200px; width: 200px; } </style> <svg> <path id="arc1" fill="green" /> </svg> <script> 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); </script>

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

  • in my opinion - if you still make an option so that this thing will seem to eat up something that will finally be tin - user33274
  • @ MaksimLensky how paceman? But this is a completely different animation - two doors are closed, open at this angle and close again :) - Alexandr_TT
  • What is a paceman? - user33274
  • one
    @MaksimLensky Well, for example codepen.io/zachary_price/pen/yOqPeN and on our site even had ru.stackoverflow.com/a/770487/28748 - Alexandr_TT
  • on css I know how .. - user33274