是否有可能使SVG动画与进度环，但右和左dashoff设置移动?

Question

所以我在我的代码中有这样的东西，我使用gsap，如果每个人都不知道，好吧，只要想想dashoffset和dasharray在svg循环路径

你可以在codepen中看到这一点，这在我们组中是溢价的，但我负担不起，所以我想打破这种可能性，我可以用两个dashoffset来做到这一点，但它没有像我想的那样工作。这是让它工作的代码依赖者和我做的代码。正常工作与不正常工作

.circle-container__progress {
fill: none;
stroke-linecap: round;
stroke: var(--completion-color);
stroke-dasharray: 100 100;
stroke-linecap: square;
stroke-width: var(--circle-border-width);
/* // For animations...
// transition: stroke-dashoffset 1s ease-in-out;
// will-change: transform; */
}

我相信这段代码中还有更多的东西，或者是不是要在两个方向上制作两个dasharray的动画?如果不行，就说一下可能的方法。谢谢你的回复。

Answer 1

这是纯SVG(只有SVG属性)版本。pathLength为100，因此dasharray中的第一个值是介于0到100之间的数字。起点"因为路径是在我旋转圆后的6点钟方向。偏移值现在是-(100 - value) / 2。

let c1 = document.getElementById('c1');
document.forms.form01.range.addEventListener('change', e => {
let value = parseInt(e.target.value);
c1.setAttribute('stroke-dasharray', `${e.target.value} 100`);
c1.setAttribute('stroke-dashoffset', `-${(100 - value) / 2}`);
});

<form name="form01">
<input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
<circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)" stroke-dasharray="50 100" stroke-dashoffset="-25" pathLength="100" />
</svg>

和动画的CSS版本看起来像这样:

circle#c1 {
stroke-dasharray: 0 100;
stroke-dashoffset: -50;
animation: animateCircle 4s forwards linear;
}
@keyframes animateCircle {
0% {
stroke-dasharray: 0 100;
stroke-dashoffset: -50;
}
100% {
stroke-dasharray: 100 100;
stroke-dashoffset: 0;
}
}

<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
<circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)"  pathLength="100" />
</svg>