Perché il loop dell'animazione di Raphael JS non funziona?

Question

Ciao lì Ho realizzato questa animazione utilizzando il framework Raphael. Voglio che la stella (logoStar) giri indefinitamente, ma viene eseguita una sola volta. Qualcuno può aiutare? Grazie

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); 
} 

Animazione da 360 ° a 360 ° sembra che non ci nessuna animazione, quindi è necessario ripristinare la rotazione a zero prima.

Answer 2

Io non sono molto sicuro, ma cosa succede se si esegue questa operazione:

while(true){starSpin();} 

Sembra che il metodo viene eseguito solo una volta, in modo che "gira" una volta ...

Answer 3

Non ne sono completamente sicuro, ma il non è ancora definito quando si tenta di utilizzarlo nella funzione anonima.

provare a cambiare:

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

a

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

EDIT
Si scopre che questo non è affatto - non so quale sia il problema è (si spera qualcuno che ha più esposizione alla biblioteca di Raffaello può aiutare là fuori), ma una soluzione kludgey-but-works è di cancellare l'elemento in questione prima di chiamare ing l'intera funzione costrutto nel callback (ti avevo avvertito che era kludgey).

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

Answer 4

Sono d'accordo con Michael Mao, si dovrebbe mettere

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

in un ciclo.

Ma cicli come questo mentre (vero) non sono sempre una buona idea. Ci vorrà troppa CPU e alcuni browser potrebbero avvisare l'utente che uno script sta causando il lento rallentamento della pagina. Forse è meglio aggiungere un timeout prima di rieseguire l'animazione. Basta provare e vedere che cosa funziona meglio;)

Answer 5

Solo una breve osservazione:

Looks like "Rotazione" non è parte del Atrr più da ver 2, quindi non è possibile utilizzarlo in "animate", ma è possibile sostituire che con "trasformare : "r" + (in una certa misura)" ..

esempio:

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

Answer 6

dalla versione 2 è uscito, il vero modo per avere un'animazione infinitamente loop è questa:

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

Infinity è un property in Javascript, quindi non inserirlo come stringa.

Ecco un lavoro fiddle.