Question

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

Here's a link移至我正在处理的代码笔上。

如何避免动画突然结束？

我已经尝试将动画设置为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动画更平滑

2 个答案: