Kreise mit Raphael JS animieren

Question

Ich möchte Kreise von einem Punkt animieren, der mit Raphael JS erstellt wurde.

Hier ist der Code-Schnipsel ich versucht:

for(var i=1; i<4; i++) { 
    var circle = paper.circle(width*0.4, height*0.2, 10*i); 
    circle.attr(
     { 
      stroke: '#0000d7', 
      'stroke-width': 1, 
      'stroke-linejoin': 'round' 
     } 
    ); 
    circle.animate({transform: "T0,100"}, 2000); 
} 

ich den kompletten Kreis animiert zu gehen. Aber ich möchte zuerst den innersten Kreis, dann den zweiten und dann den dritten Kreis nach einigen Millisekunden (als Effekt). Aber ich habe keine Ahnung, wie es geht.

Answer 1

Angenommen, dies ist erweiterbar auf eine beliebige Anzahl von Kreisen, würde ich SetTimeout und eine Schleife, ähnlich der, die Sie verwenden, verwenden.

Damit die Animation aus einer Schleife funktioniert, müssen Sie eine "Schließung" verwenden, damit die Animation bei späterer Ausführung weiß, auf welchen Kreis sie verweist (andernfalls könnte sie nur das letzte Objekt animieren)).

Die Verwendung einer Funktionsform von (function() {})() (genannt unmittelbarer Modus) stellt sicher, dass Variablen innerhalb des Funktionsumfangs erfasst werden, sodass die Variablen später korrekt sind.

for(var i=1; i<10; i++) { 
    (function() {     // start closure with functional scope 
     var circle = paper.circle(width*0.4, height*0.2, 10*i); 
     setTimeout(function() { circle.animate({transform: "T0,100"}, 2000); }, (i-1) * 2000 ) 
    })(); 
} 

jsfiddle

Wenn Sie zuerst alle Kreise nicht wollen, müssen Sie noch einen Verschluss, den Index erfassen i (die wir c zuweisen wird klar in der Funktion zu machen).

zB

for(var i=1; i<10; i++) { 
    (function() {     // start functional scope 
     var c = i;     // c is now tied to this scope 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate({transform: "T0,100"}, 2000); 
     }, (c-1) * 2000 ) 
    })(); 
} 

jsfiddle

Ich bin nicht sicher, ob eine Notwendigkeit gibt es ein Animationsobjekt hier zu erstellen, aber wenn man wollte, die Docs sind here

gleiche Beispiel, aber ein Raphael verwenden. Animation.

var animation = Raphael.animation({transform: "T0,100"}, 2000) 

for(var i=1; i<10; i++) { 
    (function() { 
     var c = i; 
     setTimeout(function() { 
     var circle = paper.circle(width*0.4, height*0.2, 10*c); 
     circle.animate(animation); 
     }, (c-1) * 2000 ) 
    })(); 
} 

jsfiddle