Question

使用svg.js，我试图在group（）动画结束后创建一个回调函数。

这是我的代码来说明这个问题。我使用each（）循环为'group'的子代设置动画：

var s = SVG('scene').size(400, 400);

// creating rects
var rect1 = s.rect(100, 100).attr({fill: '#0f6'});
var rect2 = s.rect(100, 100).attr({fill: '#ccc', x: 110});
var rect3 = s.rect(100, 100).attr({fill: '#f06', x: 220});

// Adding rects to 'group'
var group = s.group();
group.add(rect1);
group.add(rect2);
group.add(rect3);

// Move down rects
moveDown();
// At the end of moveDown() animation,
// execute refill().
refill();

function moveDown() {
 group.each(function(i, children) {
  this.animate(500, '-').attr({
     x: this.bbox().x,
     y: 110
  });
 });
}

function refill() {
 rect1.fill('#ccc')
 rect3.fill("#ccc");
}

On Codepen

执行此操作的正确方法是什么？

更新

我使用 setTimeout（）来执行第一个具有延迟参数的函数。显然，它可以正常工作，但看起来确实像是肮脏的代码吗？

var delay = 1000;

// Move down rects
moveDown();

// At the end of moveDown() animation,
// execute second function.
setTimeout(function() {
  rect1.fill('#ccc');
  rect3.fill("#ccc");
}, delay);

codepen 2

更新2

使用条件检测最后一个动画元素，然后用 .after（）执行 refill（）：

moveDown();

function moveDown() {
  group.each(function(i, children) {
   this.animate(1000 * i, '-').attr({
      x: this.bbox().x,
      y: 110
    });
    // check the last child which is animated
    if(children[i] === group.last()) {
      this.animate(1, "-").after(function(situation) {
        refill();
      }) 
     }
 });
}

function refill() {
  rect1.fill('#ccc');
  rect3.fill("#ccc");
}

Codepen 3

有更好的解决方案吗？

svg.js-each（）循环动画后的回调

更新

更新2

0 个答案: