SVG. js, вызов animate () в al oop не работает

Question

Я использую SVG. js, чтобы создать несколько объектов, а затем одновременно анимировать их. Я не могу заставить эту работу работать в oop. Если я не использую al oop, он работает нормально. См. https://jsfiddle.net/drs44/5g8aextL/18/ или код ниже. Я считаю, что это как-то связано с тем, как работают закрывающие области.

var draw = SVG('drawing').size(450,450)
a = []

for (i= 0; i< 3; i++) {
a[i] = draw.rect(50, 50).move(65, 65).fill('#f06');
}

r2 = Math.random();
// This works:
a[0].animate(1000, '<>').during(function(pos, morph, eased){
    a[0].center(55 * eased + 95 * r2, 55 * eased + 105);});

a[1].animate(1000, '<>').during(function(pos, morph, eased){
    a[1].center(55 * eased + 85 * r2, 55 * eased + 125);});

a[2].animate(2000, '<>').during(function(pos, morph, eased){
    a[2].center(55 * eased + 75 * r2, 95 * eased + 45);});


/* But this doesn't work,  "Cannot read property 'center' of undefined'"
for (j=0; j<3; j++) {
    a[j].animate(2000, '<>').during(function(pos, morph, eased){
      a[j].center(55 * eased + 75 * r2, 95 * eased + 45);});
}
*/ 

Answer 1

Похоже, что генерируются перекрывающиеся объекты SVG в одном и том же месте.

var draw = SVG('drawing').size(450,450), a = [];

var attrs = [{elapse: 1000, y: 95, x1: 55, x2: 105},
                    {elapse: 1000, y: 85, x1: 55, x2: 125},
                    {elapse: 2000, y: 75, x1: 95, x2: 45}];

for (let i= 0; i< 3; i++) {
    let rect = draw.rect(50, 50).move(65, 65).fill('#f06');
    a.push(rect);
}

var r2 = Math.random(), j = 0;

for (; j<3; j++) {
     a[j].animate(attrs[j].elapse, '<>').during(function(pos, morph, eased){
       a[j].center(55 * eased + attrs[j].y  * r2, attrs[j].x1 * eased + attrs[j].x2);});
}

Answer 2

Оказывается, у этого есть ответ: https://decembersoft.com/posts/understanding-javascript-closures-in-for-loops/