是否可以使用进度戒指进行SVG动画，但左右Dashoff SET移动？

发布于 2025-02-08 09:24:24 字数 765 浏览 2 评论 0原文

因此，我有像这样的代码词，如果每个人都不知道，我正在使用GSAP。

您可以在我们小组中很重要的Codepen中看到这一点，但我负担不起，因此我想分解我可以使用两个dashoffset进行此操作的可能性，但它不如我想要的。这是使它起作用的代码蛋白，而不是我所做的代码。工作工作 /pen/vwqneqj“ rel =“ nofollow noreferrer”>无法正常工作 ..

.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变体在这两个方向上动画吗？如果不只是说出可能的方法。感谢您的任何回复。

原文

So I have in my codepen something like this and I'm using gsap if everyone doesn't know that fine..just think about the dashoffset and the dasharray in svg circulation path.

You can see this in codepen which is premium in our group but I can't afford it so I want to break down the possibility that I can do this with two dashoffset but it doesn't work as I wanted to. Here is the codepen that make it works vs the code that I do.
WORKING vs NOT WORKING PROPERLY..

.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; */
}

I believe there is something more in this code or is not to make two variation of dasharray animated in both direction or not? If not just say the possible way to do it. Thanks for any response.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江南月 2025-02-15 09:24:24

这是纯SVG（仅SVG属性）版本。路径长度为100，因此，dasharray中的第一个值是0到100之间的数字。在我旋转圆后，该路径的“起点”在6点处。偏移值现在为- （100-值） / 2 < / code>。

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>

Here is the pure SVG (only SVG attributes) version. The pathLength is 100 and the first value in the dasharray is therefore a number between 0 and 100. The "starting point" for the path is at 6 o'clock after I have rotated the circle. The offset value is now -(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>

And the animated CSS version looks like this:

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>

回复收藏 0 原文

~没有更多了~