SVG.js, एक लूप में एनिमेट () को कॉल करना काम नहीं करता है

Question

मैं कई वस्तुओं को बनाने और फिर एक साथ उन्हें चेतन करने के लिए SVG.js का उपयोग कर रहा हूं। मैं इस काम को लूप में नहीं कर सकता। अगर मैं लूप का उपयोग नहीं करता, तो यह ठीक काम करता है। 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);});
}
*/

svg.js

0

David 5 मार्च 2020, 21:24

Answer 1

पता चलता है कि इसका उत्तर है: https://decembersoft.com/ पोस्ट/समझ-जावास्क्रिप्ट-क्लोजर-इन-फॉर-लूप/

0

David 5 मार्च 2020, 23:10

कृपया प्रासंगिक प्रमुख पहलुओं को अपने उत्तर में कॉपी करें ताकि लिंक टूटने पर भी इस उत्तर का मूल्य हो!

–

Fuzzyma

7 मार्च 2020, 10:44

Answer 2

ऐसा लगता है कि एक ही प्लेसमेंट पर ओवरलैप 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);});
}

0

OO7 5 मार्च 2020, 23:30

SVG.js, एक लूप में एनिमेट () को कॉल करना काम नहीं करता है

2 जवाब

संबंधित सवाल

नए सवाल

svg.js