Warum wird meine Raphael JS Animationsschleife nicht?

Question

Hallo dort Ich habe diese Animation mit dem Raphael-Framework gemacht. Ich möchte, dass sich der Stern (logoStar) unendlich dreht, aber nur einmal läuft. Kann jemand helfen?

Danke

window.onload = function() { 
buildLogo(); 
} 

var buildLogo = function() { 
    var logo = Raphael("title",800,236); 

    var logoStar = logo.path("M12.245 131.057L16.039 138.743L24.521 139.974L18.383 145.958L19.832 154.406L12.245 150.418L4.658 154.406L6.108 145.958L-0.03 139.974L8.452 138.743").attr({fill:"#fff",stroke:"none"}); 

    var starSpin = function() { 
     logoStar.animate({rotation: "360"}, 5000, starSpin); 
    } 
    starSpin(); 
} 

Answer 1

var starSpin = function() { 
    logoStar.attr({rotation: 0}).animate({rotation: 360}, 5000, starSpin); 
} 

Animation von 360 ° bis 360 ° sieht aus wie es keine Animation, so müssen Sie Rotation zurücksetzen, bevor auf Null.

Answer 2

Ich bin nicht ganz sicher, aber was, wenn Sie dies tun:

while(true){starSpin();} 

Das klingt wie die Methode nur einmal ausgeführt wird, so dass er einmal „Spins“ ...

Answer 3

Ich bin mir nicht ganz sicher, aber ich denke, , dass starSpin ist noch nicht definiert, wenn Sie versuchen, es in der anonymen Funktion zu verwenden.

Try-Wechsel:

var starSpin = function() { 
    logoStar.animate({rotation: "360"}, 5000, starSpin); 
} 
starSpin(); 

zu

function starSpin() { 
    logoStar.animate({rotation: "360"}, 5000, starSpin); 
} 
starSpin(); 

EDIT
Es stellt sich heraus, dass das ist es gar nicht - ich weiß nicht, was das Problem ist (hoffentlich jemand, der der Raphael-Bibliothek mehr Aufmerksamkeit schenkt, kann da draußen helfen), aber eine kluge-aber-funktioniert-Lösung besteht darin, das betreffende Element vor dem Anruf zu löschen ing die gesamte Konstrukt-Funktion in den Rückruf (Ich warnte Sie, es war klugdy).

SEE:http://jsfiddle.net/rbf5x/1/

Answer 4

ich mit Michael Mao zustimmen, sollten Sie

logoStar.animate({rotation: "360"}, 5000, starSpin); 

in einer Schleife setzen.

Aber Schleifen wie diese während (wahr) sind nicht immer eine gute Idee. Es wird zu viel CPU verbrauchen und einige Browser können den Benutzer warnen, dass ein Skript die Seite langsam ausgeführt wird. Vielleicht ist es am besten, ein Timeout hinzuzufügen, bevor Animate erneut ausgeführt wird. Nur versuchen und sehen, was am besten funktioniert;)

Answer 5

Nur eine kurze Bemerkung:

Sieht aus wie „Rotation“ nicht Teil des Atrr ist mehr da ver 2, so dass Sie es nicht in „belebten“ verwenden können, aber Sie können das ersetzen mit „verwandeln : "r" + (einige Grad)“..

zB:

element.animate({transform: "r" + (-90)}, 2000, 'bounce'); 

Answer 6

Seit der Version 2 herauskam, ist der eigentliche Weg, um eine unendlich Looping Animation haben dies:

var spin = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity); 
myElement.animate(spin); 

Infinity ist ein property in Javascript, also geben Sie es nicht als Zeichenfolge ein.

Hier ist eine funktionierende fiddle.