Question

我在循环SVG动画方面遇到了一些问题。

我想出了如何为路径制作动画，但问题是我希望它们在绘制时消失，并在短暂的延迟时间后显示不同的两个。我也需要循环这两个操作。

www.jsfiddle.net/8zneofyw /

由于

Answer 1

Challange接受了

这就是我解决它的方法：

动画运行10秒。
每条路径都有一条线和一条同样长的空格stroke-dasharray: 160, 160;

因此，这会创建一个被绘制的空行。

但是，所有四条路径都是同时创建的，我们想绘制两条和两条线。所以我们需要在前两个路径和后两个路径之间延迟5秒：

在路径后添加空格以填充动画的一半：stroke-dasharray: 160, 160, 0, 320;
现在我们只需要在正确的时间开始动画：前两个动作stroke-dashoffset: 160;。最后两个stroke-dashoffset: 320。

＆＃13;

path {
  stroke-width: 2;
}
#one {
  stroke-dasharray: 160, 160, 0, 320;
  stroke-dashoffset: 160;
  animation: magic 10s linear infinite;
}
#two {
  stroke-dasharray: 160, 160, 0, 320;
  stroke-dashoffset: 160;
  animation: magic 10s linear infinite;
}
#tree {
  stroke-dasharray: 165, 165, 0, 330;
  stroke-dashoffset: 330;
  animation: moremagic 10s linear infinite;
}
#four {
  stroke-dasharray: 165, 165, 0, 330;
  stroke-dashoffset: 330;
  animation: moremagic 10s linear infinite;
}
@keyframes magic {
  0% {
    stroke-dashoffset: 160;
  }
  50% {
    stroke-dashoffset: 0;
  }
  50.01% {
    stroke-dashoffset: -160;
  }
  100% {
    stroke-dashoffset: -160;
  }
}
@keyframes moremagic {
  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<svg height="200px" viewBox="0 0 200 100">
  <circle cx="25" cy="50" r="10" fill="none" stroke="tomato" />
  <circle cx="175" cy="50" r="10" fill="none" stroke="pink" />
  <path id="one" d="m25,50, 150,0" fill="none" stroke="green" />
  <path id="two" d="m25,50, 75,20 75,-20 " fill="none" stroke="blue" />
  <path id="tree" d="m25,50, 75,-20 75,20 " fill="none" stroke="firebrick" />
  <path id="four" d="m25,50, 75,-30 75,30 " fill="none" stroke="aqua" />
</svg>

＆＃13;

javascript循环通过svg动画

1 个答案: