¿Por qué no mi ciclo de animación Raphael JS?

Question

Hola He hecho esta animación con el marco Raphael. Quiero que la estrella (logoStar) gire indefinidamente, pero solo se ejecuta una vez. ¿Alguien puede ayudar? Gracias

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

Animación de 360 ​​° a 360 ° Parece que no hay animación, por lo que necesita para restablecer la rotación a cero antes.

Answer 2

No estoy muy seguro, pero lo que si usted hace esto:

while(true){starSpin();} 

Suena como el método sólo se ejecuta una vez, por lo que "gira" de una vez ...

Answer 3

No estoy del todo seguro, pero creo que creo que no está definido cuando intenta usarlo en la función anónima.

cambio Probar:

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

a

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

EDITAR
Resulta que eso no es en absoluto - No sé cuál es el problema es (con suerte alguien que tiene más exposición a la biblioteca de Raphael puede ayudar) pero una solución de kludgey-but-works es borrar el elemento en cuestión antes de llamar ing toda la función de construcción en la devolución de llamada (le advertí que era kludgey).

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

Answer 4

Estoy de acuerdo con Michael Mao, se debería poner

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

en un bucle.

Pero los bucles como este mientras (verdadero) no siempre son una buena idea. Tomará demasiada CPU y algunos navegadores pueden advertir al usuario que un script está haciendo que la página se ejecute lentamente. Tal vez sea mejor agregar un tiempo de espera antes de volver a ejecutar animate. Sólo trata de ver qué funciona mejor;)

Answer 5

Sólo una observación rápida:

Parece que "rotación" no es parte de la ATRR más ya ver 2, por lo que no se puede utilizar en "animado", pero se puede sustituir con que "transformar : "r" + (en cierto grado)" ..

por ejemplo:

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

Answer 6

Desde la versión 2 salió, la verdadera manera de tener una animación infinitamente bucle es la siguiente:

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

Infinity es property in Javascript, así que no lo ingrese como una cadena.

Aquí hay un fiddle que funciona.