CODEWITHSUNDEEP
javascriptjqueryanimationraphael
Codename_DJ
Codename_DJ

Reputation: 563

RaphaelJS: How to animate element after another elements animation is done?

I want to animate a element after previous element has finished its animation. Righ now my code is like this:

var canvas = Raphael(0, 0, 1000, 1000 );
    var boxWidth = 80;
    var boxHeight = 30;
    var rectangles = canvas.set();
    rectangles.push(canvas.rect(460, 30, 0, 0),
                    canvas.rect(460, 90, 0, 0),
                    canvas.rect(460, 150, 0, 0),
                    canvas.rect(460, 210, 0, 0),
                    canvas.rect(460, 270, 0, 0));
    rectangles.attr({fill: "#e00", stroke: "#fff"});

    rectangles[0].animate(anim.delay(200));
    rectangles[1].animate(anim.delay(400));
    rectangles[2].animate(anim.delay(800));
    rectangles[3].animate(anim.delay(1200));
    rectangles[4].animate(anim.delay(1600));

Here I have manually provided incremented delay values like 200,400,800. For a large set of elements, this will be pretty tiresome calculation. I think there must be another way to do this by linking one animation to other animations end. Please Guide.

Upvotes: 0

Views: 314

Answers (2)

slebetman
slebetman

Reputation: 113926

There's something missing from your code posted above. And that missing bit is exactly how you'd run another animation once an animation is complete.

The missing bit is how you created your anim object.

When creating anim, Raphael.animation allows you to supply a callback that will be called once an animation is complete:

var anim = Raphael.animation(params, duration, easing, next_callback);

function next_calback () {/* ... */}

Now you can process your rectangles like this:

var i=0;
function next_callback () {
    if (rectangles[i]) {
        rectangles[i].animate(anim);
        i++;
    }
}

next_callback(); // kickstart the animation

Of course, you can name your callback something more descriptive than next_callback and you can wrap the whole thing in a closure so that i isn't exposed as a global variable but that's the basic structure.

Upvotes: 1

Nishit Maheta
Nishit Maheta

Reputation: 6031

use rectangles code in loop. add animation code in loop . here delay increase automatically to 200,400,800,1600

var delay = 200;
for(i = 0;i<rectangles.length;i++){
  rectangles[i].animate(anim.delay(delay));
  delay = delay+delay;
}

Upvotes: 0

Related Questions