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>

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

如何在我的循环进度条的路径中放置动画？

1 个答案: