Pourquoi ma boucle d'animation Raphael JS ne va pas?

Question

Hi là J'ai fait cette animation en utilisant le framework Raphael. Je veux que l'étoile (logoStar) tourne indéfiniment mais elle ne tourne qu'une seule fois. Quelqu'un peut-il aider? Merci

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 de 360 ​​° à 360 ° ressemble il n'y a pas d'animation, donc vous devez réinitialiser la rotation à zéro avant.

Answer 2

Je ne suis pas très sûr, mais si vous faites ceci:

while(true){starSpin();} 

Il semble que la méthode est exécutée une seule fois, il « tourne » une fois ...

Answer 3

Je ne suis pas tout à fait sûr, mais je pense que starSpin n'est pas encore défini lorsque vous essayez de l'utiliser dans la fonction anonyme.

Essayez de changer:

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

à

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

EDIT
Il se trouve que ce n'est pas du tout - je ne sais pas quel est le problème est (je l'espère Quelqu'un qui a plus d'exposition à la bibliothèque de Raphael peut aider là-bas) mais une solution kludgey-mais-travaille est d'effacer l'élément en question avant l'appel toute la fonction de construction dans le rappel (je vous avais prévenu que c'était kludgey).

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

Answer 4

Je suis d'accord avec Michael Mao, vous devez mettre

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

dans une boucle.

Mais les boucles comme ceci (vrai) ne sont pas toujours une bonne idée. Il faudra trop de CPU et certains navigateurs peuvent avertir l'utilisateur qu'un script provoque l'exécution lente de la page. Peut-être qu'il est préférable d'ajouter un délai avant de ré-exécuter animer. Juste essayer de voir ce qui fonctionne le mieux;)

Answer 5

Juste une observation rapide:

On dirait que « Rotation » ne fait pas partie du Atrr plus depuis ver 2, vous ne pouvez pas l'utiliser dans « Animer », mais vous pouvez le remplacer par « transformer : "r" + (un certain degré) » ..

par exemple:

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

Answer 6

Depuis la version 2 est sorti, la vraie façon d'avoir une animation en boucle infinie est ceci:

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

Infinity est un property in Javascript, donc ne l'entrez pas comme une chaîne.

Voici un fonctionnement fiddle.