代码之家 › 专栏 › 技术社区 › Brandon Durham

如何在svg.js中暂停循环动画?

svg.js svg animation

1

Brandon Durham · 技术社区 · 6 年前

我有一个循环动画,看起来像这样:

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

我想在每个回路中加入800毫秒的延迟。特别是在每次笔划动画设置为 { 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();

但这也只增加了一次延迟。

在每个回路开始时,是否有可能使每个回路包括800ms的延迟?

1 回复 | 直到 6 年前

1

0

Andrew Reid 6 年前

如果我理解正确,可以通过将动画相关代码放在函数中并在每个动画结束时调用该函数来实现:

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

那我们就可以用 cycle.apply(foreground) 得到 this 要转换元素并启动动画,请执行以下操作:

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

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

<div id="content"></div>