CODEWITHSUNDEEP
pathjquery-animateraphaelintervals
rohan_vg
rohan_vg

Reputation: 1129

Raphaeljs animate path after interval

I have a path which I want to animate every 5 seconds. I tried the using setInterval in the following code but it keeps duplicating the canvas. Is there an easier solution?

JS Fiddle Link

window.onload= function aa () {

    paper = Raphael(0,0,900,900);    

    var p=paper.path("M10,10 h20 v10 h-20z");
    p.animate({path:"M10,10 h300 v10 h-300z"},5000);

    //window.setInterval(aa(), 5000);
}​

Upvotes: 1

Views: 315

Answers (1)

gion_13
gion_13

Reputation: 41533

You are repeating the whole aa function that initializes the raphael paper (paper = Raphael(0,0,900,900);). That's why your canvas gets duplicated.
Moreover, it would be better to use callbacks (you can see the the docs on animate) rather than setInterval to trigger your animations.
This is how I would code it : 

function init(){
    var paper = Raphael(0, 0, 900, 900),
        pathsString = ["M10,10 h20 v10 h-20z","M10,10 h300 v10 h-300z"],
        p = paper.path(pathsString[0]),
        animationCounter = 0, 
        animationDuration = 5000,
        animate = function(){
            animationCounter++;
            p.animate({path : pathsString[animationCounter %2]}, animationDuration, animate);
        };

    animate();
};
window.onload = init;​

Here's a working example of the above code.

Upvotes: 1

Related Questions