使循环 drawSVG 动画更流畅

Question

我是 GSAP 的新手，正在试用该插件。我想创建一种效果，其中矩形边框由连续循环中的小路径绘制。我基本上做到了这一点，但动画的结尾在重置时非常不稳定。

Here's a link 到我正在处理的 codepen。

如何避免动画突然结束？

我试过将动画设置为 drawSVG: "100% 115%" 但没用。
我还没有尝试更改缓动，因为我认为这不会解决问题。

感谢您的帮助！

Answer 1

我相信本教程正是您要实现的目标Codepen

code required for codepen link

我把你的笔分叉了，这样你就可以看到它的实际效果了 Codepen

希望这就是您要找的东西

Answer 2

我觉得之前的答案并不适合我，因为我觉得可以做一些更优雅的事情。我找到了一个不使用 GSAP 但使用 CSS 动画的简单解决方案。

结果是仅使用一个元素的流畅动画。

GSAP 无论如何都会操纵 CSS 动画，所以这是对原始问题的简化。

https://codepen.io/strigiforme/pen/zLbYWm

<svg viewbox = "0 0 200 200">
 <rect id = "rect" x = "85" y = "20" width="30" height="30" stroke = "red" stroke-width = "1.5" fill="none" stroke-dasharray="30 90" stroke-dashoffset = "240"></rect>

body {
  background-color: #222;
  overflow: hidden;
} 

#rect{
  animation: draw 5s linear infinite;
}

@keyframes draw{
 14%{
   stroke: orange;
 }
 28%{
   stroke: yellow;
 }
 42%{
   stroke: green;
 }
 56%{
   stroke: blue;
 }
 70%{
   stroke: indigo;
 }
 84%{
   stroke: violet;
 }
 98%{
   stroke: red;
 }
 to{
   stroke-dashoffset: 0;
  }
}

使循环 drawSVG 动画更流畅

Making a looping drawSVG animation smoother

svg

gsap