javascript - 动画 SVG 圆形边框像进度一样，但一种方式和另一种方式

Question

对不起我糟糕的英语，我会尽量描述我需要的东西。jsFiddle 将帮助您了解我想要什么：https ://jsfiddle.net/8natrpqm/

var circle = document.querySelector('.animated-circle--animated > .animated-circle__circle');
var ghostCircle = document.querySelector('.animated-circle--animated > .animated-circle__circle--ghost');

var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

ghostCircle.style.strokeDasharray = `${circumference} ${circumference}`;
ghostCircle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
}

function setGhostProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  ghostCircle.style.strokeDashoffset = offset;
}


var progress = 0;
var ghostProgress = 0;

function animateProgress() {
  if (progress < 18) {
    progress++;
    setProgress(progress);

    setTimeout(animateProgress, 60);
  } else {
    animateGhostProgress();
  }
}

function animateGhostProgress() {
  if (ghostProgress < 18) {
    ghostProgress++;
    setGhostProgress(ghostProgress);
    setTimeout(animateGhostProgress, 60);
  } else {

  }
}

animateProgress();

.circles {
  position: relative;
}

.animated-circle--fixed {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.animated-circle--animated {
  position: relative;
  z-index: 50;
}

.animated-circle__circle {
  transition: 0.35s stroke-dashoffset;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.animated-circle__circle--ghost {
  z-index: 60;
}

<div class="circles">
  <svg class="animated-circle animated-circle--fixed" width="400" height="400">
        <circle class="animated-circle__circle" stroke="lightblue" stroke-width="2" fill="transparent" r="199" cx="200" cy="200" />
      </svg>

  <svg class="animated-circle animated-circle--animated" width="400" height="400">
        <circle class="animated-circle__circle" stroke="blue" stroke-width="2" fill="transparent" r="199" cx="200" cy="200" />
        <circle class="animated-circle__circle animated-circle__circle--ghost" stroke="lightblue" stroke-width="2" fill="transparent" r="199" cx="200" cy="200" />
    
        <circle class="circle-icon__circle" stroke="transparent" stroke-width="0" fill="red" r="15" cx="375" cy="110" />
      </svg>
</div>

我想为 SVG 圆圈的边界设置动画，使其一直到一个点，然后也逐渐消失。我正在使用 stroke-dashoffset，从 0 到 15 可以正常工作，但我真的找不到相反的方法（意味着 15 保持在上，但下必须再次向上移动到 0 到 15 ）。

在 Fiddle 中，您会看到我尝试添加一个幽灵圆圈来与第一个动画圆圈重叠，但结果有点奇怪，就像存在图形问题一样。

任何想法 ？

谢谢 ！

标签： javascriptcsssvg

Answer 1

我无法详细了解您，但动画应该在 0 到 15 之间进行动画处理（如果我们谈论一个整圈 60 分钟的时钟）。固定点应在 15 处，然后向 0 延伸。

正如我所看到的，您的代码正在运行，但您希望能够在 0 到 15 之间返回和第四个。

我用路径替换了你的圆圈，因为我可以设置路径的长度，以便更容易计算距离。在这里，我根据范围的值设置 dasharray - 所以，唯一改变的值是数组中的第一个数字。

document.forms.rangeform.range.addEventListener('change', e => {
  document.querySelector('#clock').style.strokeDasharray = `${e.target.value} 60`;
});

<form name="rangeform">
  <input type="range" name="range" min="0" max="15" value="15">
</form>

<svg viewBox="0 0 100 100" width="200">
  <circle cx="50" cy="50" r="40" fill="none" stroke="lightblue" stroke-width="2"/>
  <path id="clock" pathLength="60" d="M50 10 a 40 40 1 1 0 1 0" fill="none" stroke="navy" stroke-width="5" stroke-dasharray="15 60" stroke-dashoffset="-45" stroke-linecap="round" />
</svg>