Question

刚刚创建了我的第一个关键帧进度指示器，我在我的react项目中使用了它。我想将百分比状态推送到此关键帧，以便可以将百分比填充到特定点。目前，它已满，但我不知道如何停止动画。例如，当我用“ 50”推动道具时，我希望填充物停止在50％处。

<svg height="180" width="180" class="circle--static">
  <circle cx="100" cy="100" r="71" stroke="#cde9db" stroke-width="6" fill-opacity="0" />
</svg>
<svg height="180" width="180" class="circle--animated">
  <circle cx="100" cy="100" r="71" stroke="#68c087" stroke-width="10" fill-opacity="0" />
</svg>

.circle--static {
      circle {
         stroke-dasharray: 4;
         animation: stroke 2s ease-out forwards;
       }
   }

   .circle--animated {
      top: 0;
      left: 0;
      position: absolute;

      circle {
         stroke-dasharray: 1000;
         stroke-dashoffset: 1000;
         animation: stroke 60s ease-out forwards;
         animation-iteration-count: infinite;
      }

      @keyframes stroke {
         to {
            stroke-dashoffset: 0;
         }
      }

      @keyframes fadeIn {
         to {
            opacity: 1;
         }
      }
   }

Answer 1

可以使用getTotalLength方法找到SVG中路径的总长度。在您的情况下，您也可以将公式用于圆的周长（2 * Math.PI * r）。

无论如何，您都需要知道要设置动画的路径的长度，在这种情况下为445。

stroke-dasharray: 445;
stroke-dashoffset: 445;

如果要将动画停止在50％，则意味着必须在445 / 2 = 222.5停止动画

 @keyframes stroke {
      to {
        stroke-dashoffset: 222.5;
      }
    }

接下来是演示。希望对您有所帮助。

svg {
  border: 1px solid;
}

.circle--static circle {
  stroke-dasharray: 4;
  animation: stroke 2s ease-out forwards;
}

.circle--animated {
  top: 0;
  left: 0;
  /*position: absolute;*/
}
.circle--animated circle {
  stroke-dasharray: 445;
  stroke-dashoffset: 445;
  animation: stroke 6s ease-out forwards;
  animation-iteration-count: infinite;
}
@keyframes stroke {
  to {
    stroke-dashoffset: 222.5;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

<svg height="180" width="180" class="circle--static">
  <circle cx="100" cy="100" r="71" stroke="#cde9db" stroke-width="6" fill-opacity="0" />
</svg>


<svg height="180" width="180" class="circle--animated">
  <circle id="kk" cx="100" cy="100" r="71" stroke="#68c087" stroke-width="10" fill-opacity="0" />
</svg>

SCSS基于百分比的停止关键帧SVG圆动画

1 个答案: