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

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 的 Path 中，但我不确定这样做的具体方法是什么。

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>

你并不完全清楚你想要什么。但希望这至少能让您入门。