javascript - 如何在圆形进度条的路径中放置动画？

Question

我有一个有两条路径的圆形进度条。随着数据的进入，其中一条路径的长度会增加，最终将整个圆圈变成红色。

SVG HTML

<path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" stroke-width="4" fill-opacity="0">
  </path>

  <path id="path2" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#EB483F" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.416, 295.416; stroke-dashoffset: 250"></path>
  </svg>

CSS(只是让红色路径的加载更流畅)

#path2 {
  -webkit-transition-property: stroke-dashoffset; /* Safari */
  transition-property: stroke-dashoffset;
  -webkit-transition-duration: 1s; /* Safari */
  transition-duration: 0.3s;
}

.viewbox {
  width: 50%;
}

https://jsfiddle.net/z5yb5kr9/

我希望剩余的灰色部分有一个动画，例如一个小 div 穿过它来照亮它。类似的东西

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader

我相信我需要添加某种关键帧动画并将 div 放入 svg 的路径内，但我不确定这样做的具体方法是什么。

Answer 1

这是在圆形进度条上进行脉冲动画的一种方法。

为了让脉冲效果显示在不断增长的进度条内，最明显的方法是创建脉冲效果作为它自己的动画，然后用实际的进度弧掩盖它。

首先，让我们从纯红色进度条开始。我添加了一个生长动画用于测试。

.viewbox {
  width: 50%;
}

#progress {
  stroke-dasharray: 296 296;
  stroke-dashoffset: 296;
  animation: grow 5s ease-out infinite;
}

@keyframes grow {
  100% { stroke-dashoffset: 0; }
}

<svg class="viewbox" viewBox="0 0 100 100">

  <circle id="grey" cx="50" cy="50" r="47"
          transform="rotate(-90 50 50)"
          stroke="#A9B0B7" stroke-width="4" fill="none"/>
  
  <circle id="progress" cx="50" cy="50" r="47"
          transform="rotate(-90 50 50)" pointer-events="all"
          stroke="#EB483F" stroke-width="6" fill="none"/>
</svg>

接下来，让我们创建模仿 example you gave in an answer that was deleted 的脉冲动画。 .

.viewbox {
  width: 50%;
}

#pulse {
  stroke-dasharray: 0 0 0 296;
  animation: pulse 1.5s linear infinite;
}

@keyframes pulse {
   33% { stroke-dasharray: 0   0 148 296; }
   66% { stroke-dasharray: 0  50 200 296; }
  100% { stroke-dasharray: 0 296   0 296; }
}

<svg class="viewbox" viewBox="0 0 100 100">

  <rect width="100" height="100" fill="#EB483F"/>
  <circle id="pulse" cx="50" cy="50" r="47"
          transform="rotate(-90 50 50)" pointer-events="all"
          stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</svg>

它只是红色背景上的一个半透明圆圈(带有破折号动画)。

倒数第二步是将第一个示例转换为我们需要的掩码形式。在蒙版中，黑色是透明的，白色是不透明的。

.viewbox {
  width: 50%;
}

#progress {
  stroke-dasharray: 296 296;
  stroke-dashoffset: 296;
  animation: grow 5s ease-out infinite;
}

@keyframes grow {
  100% { stroke-dashoffset: 0; }
}

<svg class="viewbox" viewBox="0 0 100 100">

  <rect width="100" height="100" fill="black"/>
  
  <circle id="progress" cx="50" cy="50" r="47"
          transform="rotate(-90 50 50)" pointer-events="all"
          stroke="white" stroke-width="6" fill="none"/>
</svg>

最后一步是将最后两个步骤结合起来。我们将上一步变成适当的<mask>并用它来掩盖脉冲动画。

.viewbox {
  width: 50%;
}

#progress {
  stroke-dasharray: 296 296;
  stroke-dashoffset: 296;
  animation: grow 5s ease-out infinite;
}

@keyframes grow {
  100% { stroke-dashoffset: 0; }
}

#pulse {
  stroke-dasharray: 0 0 0 296;
  animation: pulse 1.5s linear infinite;
}

@keyframes pulse {
   33% { stroke-dasharray: 0   0 148 296; }
   66% { stroke-dasharray: 0  50 200 296; }
  100% { stroke-dasharray: 0 296   0 296; }
}

<svg class="viewbox" viewBox="0 0 100 100">

  <defs>
    <mask id="progress-as-mask" >
      <rect width="100" height="100" fill="black"/>
      <circle id="progress" cx="50" cy="50" r="47"
              transform="rotate(-90 50 50)" pointer-events="all"
              stroke="white" stroke-width="6" fill="none"/>
    </mask>
  </defs>

  <circle id="grey" cx="50" cy="50" r="47"
          transform="rotate(-90 50 50)"
          stroke="#A9B0B7" stroke-width="4" fill="none"/>

  <g mask="url(#progress-as-mask)">
    <rect width="100" height="100" fill="#EB483F"/>
    <circle id="pulse" cx="50" cy="50" r="47"
            transform="rotate(-90 50 50)" pointer-events="all"
            stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
  </g>
</svg>

您并不完全清楚自己想要什么。但希望这至少让您开始了。