Как приостановить зацикленную анимацию в SVG.js? - PullRequest
Новая
       50

Как приостановить зацикленную анимацию в SVG.js?

0 голосов
/ 06 июня 2018

У меня есть зацикленная анимация, которая выглядит следующим образом: 

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

… но это тоже добавляет задержку только один раз.

Возможно ли, чтобы каждый цикл включал задержку 800 мс в началекаждый цикл?

1 Ответ

0 голосов
/ 07 июня 2018

Если я правильно понимаю, один из способов добиться этого - поместить код, связанный с анимацией, в функцию и вызвать эту функцию в конце каждой анимации: 

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>
...