Animation 如何在SVG.js中暂停循环动画？

我有一个循环动画，看起来像这样：

foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).loop();

我想在每个环路中加入800毫秒的延迟。特别是在每次将笔划设置为

{opacity:0，width:34}

动画之前。我已尝试在动画中添加延迟：

foreground.animate(1000, '>', 800).stroke({ opacity: 0, width: 34 }).loop();

function cycle() {
  this.stroke({width: 0, opacity: 1}) 
      .animate(1000, '>', 800)
      .stroke({opacity:0, width: 34})
      .after(cycle);
}

…但这只是延迟了第一个循环。然后我尝试添加

delay（）

：

…但这也只会增加一次延迟

---

是否可以让每个循环在每个循环的开始处包含800毫秒的延迟？

如果我理解正确，可以实现这一点的一种方法是将动画相关代码放置在函数中，并在每个动画结束时调用该函数：

foreground.animate(1000, '>', 800).stroke({ opacity: 0, width: 34 }).loop();

function cycle() {
  this.stroke({width: 0, opacity: 1}) 
      .animate(1000, '>', 800)
      .stroke({opacity:0, width: 34})
      .after(cycle);
}

然后我们可以使用

cycle.apply（前台）

将

此

作为要转换的元素并启动动画：

var draw=SVG（'content'）。大小（500300）
var circle=draw.circle（100）.attr（{fill:'steelblue'}）.move（200,20）
循环。应用（循环）；
功能循环（）{
此.stroke（{宽度：0，不透明度：1}）
.制作动画（1000，“>”，800）
.stroke（{不透明度：0，宽度：34}）
.在（周期）之后；
}

我已经为其他SVG.js动画找到了解决方案，使用了

setInterval

，还使用了

.after（）

进行递归。但当我将该解决方案应用于动画时，它只触发一次。因此，我认为这与设置属性动画有关。对于svg.js v2，这是正确的解决方案。在v3中，将有更简单的方法来实现这一点