Question

我使用以下代码段使用SVG绘制Arc：

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

当调用describeArc方法计算路径时，将动态输入弧的起始和结束角度。

有人知道如何在绘制弧线时为其设置动画效果吗？基本上我希望延迟平滑地绘制圆弧，而不是像现在这样一次性绘制。

Answer 1

你的问题并没有描述你的意思和＃34; animate＆＃34;。下次你问一个问题时请考虑一下。

我将假设您希望该扇区像粉丝一样开放。

这是一种方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在这里小提琴：https://jsfiddle.net/e6dx9oza/351/

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

1 个答案: