Why Won't My Raphael Js Animation Loop?

Hi there I've made this animation using the Raphael framework. I want the star (logoStar) to spin indefinitely but it only runs once. Can anyone help? Thanks window.onload = functi

Solution 1:

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

Animation from 360° to 360° looks like there no animation, so you need to reset rotation to zero before.

Solution 2:

Since version 2 came out, the real way to have an infinitely looping animation is this:

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

Infinity is a property in Javascript, so don't enter it as a string.

Here's a working fiddle.

Solution 3:

Just a quick observation:

Looks like "Rotation" isn't part of the Atrr anymore since ver 2, so you can't use it in "animate", but you can replace that with "transform: "r" + (some degree)"..

eg:

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

Solution 4:

I agree with Michael Mao, you should put

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

in a loop.

But loops like this while(true) are not always a good idea. It will take too much CPU and some browsers may warn the user that a script is causing the page to run slowly. Maybe it is best to add a timeout before re-executing animate. Just try and see what works best ;)

Solution 5:

I'm not entirely sure, but I think that starSpin is not yet defined when you try to use it in the anonymous function.

Try changing:

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

to

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

EDIT It turns out that that's not it at all -- I do not know what the problem is (hopefully someone who has more exposure to the Raphael library can help out there) but a kludgey-but-works solution is to clear the element in question before calling the entire construct function in the callback (I warned you it was kludgey).

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