Question

I am using jsAnim for some simple animations .

http://jsanim.com/

I have created a simple javascript function –

<script type="text/javascript">
var man = new jsAnimManager(); 

function animation1() {
    shroom = document.getElementById("mushroom2");

    man.registerPosition("mushroom2");

    var monster =  $("#mushroom2");
var offset = monster.offset();
var l=offset.left;
var r= offset.top;


    shroom.setPosition(l,r);

    var anim = man.createAnimObject("mushroom2");

    anim.add({property: Prop.position, to: new Pos(l+100,r+400), 
           duration: 1000,ease:jsAnimEase.parabolicNeg });
}

</script>

I have similarly defined another animation2() function .

The animation works well independently .
However I am trying to loop this animation inside a for loop.

for( var i=1, l=data.length; i < 6 ; i++) 
            {

                  if  ((i==1 )||(i==3)) animation1(); else animation2();


            }

But what I observe is that the animation happens only for i=5 ( i.e .. after the loop stops executing ) . There is no animation for i = 1-4 .

Is this some threading issue ? Do I need to use some form of threads or sleeper or something ?

Please help .

I wish to make the object take a few different paths in stages .

Answer 1

All of the animation functions are being executed virtually instantaneously. Because the jsanim library doesn’t have queue functionality, the only animation you will see in this case is the last one (because each time the next animation is executed, the last one is aborted).

But it does have an onComplete callback handler, so a queue is easy enough to implement. You need a queue array that is visible to all functions:

var animationQueue = [];

Then change your for loop to add the functions to the queue instead of executing them:

for( var i=1; i<6; i++)  {
    if  (i%2==1)    //if i is odd number
        animationQueue .push(animation1); 
    else            //else i is even number
        animationQueue .push(animation2); 
}
nextAnimation();

Also notice that I used i%2==1. I am assuming you want odd numbers here when you say if(i==1 || i==3). The nextAnimation() function could look something like this:

function nextAnimation() {
    if(animationQueue.length) 
        animationQueue.shift()();
}

And lastly, you need to add the onComplete option in your call to the animation:

anim.add({
    property: Prop.position,
    to: new Pos(l+100,r+400),
    duration: 1000,
    ease:jsAnimEase.parabolicNeg,
    onComplete: nextAnimation
});

Hope that gets you onto the right track!