如何为弧的 SVG 路径设置动画？答案

【问题标题】：How to animate the SVG path for an arc?如何为弧的 SVG 路径设置动画？
【发布时间】：2017-09-29 17:54:40
【问题描述】：

我想根据批准的答案为 SVG 路径制作动画 - How to calculate the SVG Path for an arc (of a circle) 我从那个答案中复制了代码，只添加了 setInterval 函数。但是动画是错误的。我的目标是将（动画）路径绘制为普通圆圈。小提琴 - https://jsfiddle.net/alexcat/64w2hc31/

谢谢。

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 largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

  var i = 0;
  setInterval(function(){
     i++
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 270));
    if (i === 360) {
      i = 0;
    }
 }, 10);

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

<svg>
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
</svg>

<script src="https://d3js.org/d3.v3.min.js"></script>

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

describeArc(150, 150, 100, i, 270) 中存在某种问题，将其更改为describeArc(150, 150, 100, 0, i)，并在完成后调用clearInterval。

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 largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

  var i = 0;
  var intervalId = setInterval(function(){
     i++
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, i));
    if (i === 360) {
      clearInterval(intervalId);
    }
 }, 10);

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

<svg>
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
</svg>

<script src="https://d3js.org/d3.v3.min.js"></script>

【讨论】：

不错的代码！看起来不需要 d3js 库，可以节省一些 KB。

【解决方案2】：

describeArc(150, 150, 100, i, 270) 把它改成 describeArc(150, 150, 100, i, 360)

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 largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

  var i = 0;
  setInterval(function(){
     i++
    document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, i, 360));
    if (i === 360) {
      i = 0;
    }
 }, 10);

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

<svg>
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
</svg>

<script src="https://d3js.org/d3.v3.min.js"></script>

【讨论】：