使循环绘制SVG动画更流畅

Question

我是GSAP的新手，正在试验插件。我想创建一个效果，其中矩形边框由连续循环中的小路径绘制。我基本上已经实现了这个目标，但是动画的结尾在重置时非常不稳定。

这是我正在处理的代码笔的链接。

如何避免动画的突然结束？

• 我尝试将动画设置为drawSVG: "100% 115%"但没有用。

• 我还没有尝试改变宽松政策，因为我认为这不会解决它。

感谢您的帮助！

Answer 1

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

code required for codepen link

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

希望这就是你要找的地方

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;
}
}