Question

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

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

我想在每个循环中加入800ms的延迟。特别是在每次中风动画为{ opacity: 0, width: 34 }之前。我尝试在动画中添加延迟：

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

......但这只会延迟第一个循环。然后我尝试添加delay()：

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

......但是，这也只会增加延迟一次。

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

Answer 1

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

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

然后我们可以使用cycle.apply(foreground)将this作为要转换的元素并开始动画：

＆＃13;

var draw = SVG('content').size(500, 300)
var circle = draw.circle(100).attr({ fill: 'steelblue' }).move(200,20)

cycle.apply(circle);

function cycle() {
  this.stroke({width: 0, opacity: 1})
      .animate(1000, '>', 800)
      .stroke({opacity:0, width: 34})
      .after(cycle);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>

<div id="content"></div>

＆＃13;

你如何暂停SVG.js中的循环动画？

1 个答案: