javascript - SVG:填充圆弧动画？

Question

这个问题是Define a circle / arc animation in SVG的延伸和 How to calculate the SVG Path for an arc (of a circle) .

我修改了@opsb的答案如下:

function calculateArcPath(x, y, radius, spread, startAngle, endAngle){
    var innerStart = polarToCartesian(x, y, radius, endAngle);
  	var innerEnd = polarToCartesian(x, y, radius, startAngle);
    var outerStart = polarToCartesian(x, y, radius + spread, endAngle);
    var outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
		
    var d = [
        "M", outerStart.x, outerStart.y,
        "A", radius + spread, radius + spread, 0, largeArcFlag, 0, outerEnd.x, outerEnd.y,
        "L", innerEnd.x, innerEnd.y, 
        "A", radius, radius, 0, largeArcFlag, 1, innerStart.x, innerStart.y, 
        "L", outerStart.x, outerStart.y, "Z"
    ].join(" ");

    return d;
}

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

var startPath = calculateArcPath(250, 250, 50, 30, 0, 30)
var endPath = calculateArcPath(250, 250, 50, 30, 0, 150)

d3.select("path").attr("d", startPath)
d3.select("path").transition().duration(2000).attr("d", endPath)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500" style="border:1px gray solid">  
  <path id="path" fill="blue" stroke="black"></path>
</svg>

但是，路径并不是围绕圆的平滑过渡。

Answer 1

您的动画看起来很奇怪，因为您在两个曲线形状之间进行线性动画。一个端点保持固定，而另一个端点沿直线移动(而不是沿弧线移动)。

我想您会发现使用 stroke-dashoffset trick 会容易得多动画你的曲线。这是一个简单的例子:

function update_arc() {
  /* Fetch angle from input field */
  angle = document.getElementById("ang").value;
  if (angle < 0) angle = 0;
  if (angle > 360) angle = 360;
  /* Convert to path length using formula r * θ (radians) */
  var arclen = Math.PI * 50 * (360-angle) / 180.0;
  /* Set stroke-dashoffset attribute to new arc length */
  document.getElementById("c").style.strokeDashoffset = arclen;
}

#c {
  stroke-dashoffset: 157.08;
  stroke-dasharray: 314.16;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

<svg width="120" height="120" viewBox="0 0 120 120">
  <!-- Circle element of radius 50 units. -->
  <!-- (Rotated 90° CCW to put start point is at top.) -->
  <circle id="c" cx="60" cy="60"
          r="50" fill="none" stroke="blue"
          stroke-width="15"
          stroke-dashoffset="157.08"
          stroke-dasharray="314.16"
          transform="rotate(-90 60 60)" />
</svg>
<p>Enter new angle (0–360):<br />
<input type="text" id="ang" width="20" value="180" />
<button onclick="return update_arc()">Set</button></p>