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); 
 
    \t 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"; 
 
\t \t 
 
    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>