Уничтожение нескольких фигур в конце анимации KonvaJS

Question

Итак, у меня есть цикл for, генерирующий, размещающий и tweening 20 прямоугольников. Однако код только уничтожает последний сгенерированный прямоугольник. Есть ли (идеально простой) способ гарантировать, что .destroy() применяется к каждому прямоугольнику, а не к последнему?

$("#combat").click(function() { 

    for (var i = 0; i < 20; i++){ 

     var rect = new Konva.Rect({ 
      x: -500, 
      y: stage.height()*Math.random(), 
      width: 480, 
      height: 20, 
      fill: 'green', 
      stroke: 'black', 
      strokeWidth: 3 
     }); 

     layer.add(rect); 

     tween = new Konva.Tween({ 
      node: rect, 
      duration: 1, 
      x: 500, 
      onFinish: function() { 
       rect.destroy() 
      } 
     }).play(); 

    } 

}); 

Answer 1

Вы можете использовать Group объект для этого:

EDIT:

$("#combat").click(function() { 

    var rectGroup = new Konva.Group(); 

    for (var i = 0; i < 20; i++){    

     var rect = new Konva.Rect({ 
      x: -500, 
      y: stage.height()*Math.random(), 
      width: 480, 
      height: 20, 
      fill: 'green', 
      stroke: 'black', 
      strokeWidth: 3 
     }); 

     rectGroup.add(rect);   
     layer.add(rectGroup); 

     tween = new Konva.Tween({ 
      node: rect, 
      duration: 1, 
      x: 500, 
      onFinish: function() { 
       rectGroup.destroy() 
      } 
     }).play(); 

    } 

}); 

Answer 2

 var tween = new Konva.Tween({ 
      node: pentagon, 
      duration: 1, 
      x: 500, 
      onFinish: function() { 
       // this will be tween instance 
       // this.node will be rectangle 
       console.log(this.node); 
      } 
     }).play();