SVG Animation: анимировать дугу, как она нарисована

150

13 апреля 2018, 16:12

Я рисую Arc с SVG, используя следующий фрагмент:

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

Начальный и конечный углы дуги будут динамически перемещаться, когда вызывается метод describeArc для вычисления пути.

Кто-нибудь знает, как я могу анимировать дугу, когда она нарисована? В принципе, я хочу, чтобы дуга была плавно прорисована с задержкой, вместо того, чтобы ее рисовать за один раз, как в данном случае.

Answer 1

Ваш вопрос не описываете точно, что вы подразумеваете под «анимацией».

Я собираюсь предположить, что вы хотите, чтобы сектор открывался до конечного положения.

Вот один из способов сделать это.

<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>