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

Question

刚刚创建了我的第一个关键帧进度指示器，我正在我的反应项目中使用它。我想将百分比状态推送到此关键帧，以便可以将百分比填充到某个点。目前，它已填充，但我不明白如何停止动画。例如，我希望填充物在推带有"50"的道具时停止在 50%。

JSfiddle 示例

<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

SVG 中路径的总长度可以使用 getTotalLength 方法找到。在您的情况下，您还可以使用圆周长的公式(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>