所以我在我的codepen中有這樣的東西，如果每個人都不知道那很好，我正在使用gsap..想想svg回圈路徑中的dashoffset和dasharray。
您可以在 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 變體？如果不只是說出可能的方法來做到這一點。感謝您的任何回復。
uj5u.com熱心網友回復：
這是純 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492503.html
標籤：javascript 动画 svg gsap