CODEWITHSUNDEEP
javascriptjquerysvgraphael
user3612506
user3612506

Reputation: 21

Raphael JS : animating path with repeat(Infinitely)

I am trying to create an infinite "train" that moves one way inside the paper.path line. My Code currently uses loop and its not really an effect I am after.

Here is the fiddle: http://jsfiddle.net/y9XHw/

function updateLoop() {

    var paper = Raphael(10, 50, 900, 1000);
 var line = paper.path( "M300,95 L600,550" ).attr({'stroke':'#669900', 'stroke-width':5});

 var line2 = paper.path( "M300,95 L600,550" ).attr({'stroke-dasharray': "- ", 'stroke':'#99FF99', 'stroke-width':2});
    //alert(2);
    line2.animate({
        path: ("M304,99 L600,550")
    }, 500);    
}

setInterval(updateLoop,500);

Upvotes: 2

Views: 595

Answers (3)

Wtower
Wtower

Reputation: 19902

I suppose with 'train' you mean a number of animations and delays that get repeated infinitely. The v2+ repeat(Infinity) function unfortunately cannot help you as far as I know.

Your approach is almost good. Since your animation is 500 msec, you need to increase your interval to allow the animation to finish before restarting it, possibly with another 500.

Also, you need to call the function once before the timer so the user does not wait 500 before it fires up.

Upvotes: 0

Hakan SONMEZ
Hakan SONMEZ

Reputation: 2226

I don't know what you want and what "its not really an effect I am after" means. Is this what you want?

http://jsfiddle.net/XcsN/y9XHw/17/ new version: http://jsfiddle.net/XcsN/y9XHw/19/

I change this lines:

  var line2 = paper.path( "M-10,3 L310,3" ).attr({'stroke-dasharray': "- ",  'stroke':'#99FF99', 'stroke-width':2});
   line2.animate({
        path: ("M5,3 L300,3")
    }, 500);

Upvotes: 1

Easwar Raju
Easwar Raju

Reputation: 273

use Raphael.animation() to create animation object and animation.repeat() to repeat your animation.

$(function(){
    var paper = Raphael(10, 50, 320, 200);
    var c = paper.path("M 250 250 l 0 -200 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); 
    c.attr({ fill: '#000' });
    c.click(function() {
        //alert(2);
        var animation = Raphael.animation({
            path: ("M 250 250 l 0 -40 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z")
        }, 2000);
        c.animate(animation.repeat(Infinity));
    });
});

Upvotes: 0

Related Questions