Animation callback fires before animation is complete

This animation is firing the callback BEFORE it is complete. According the docs it should fire after the animation is done. Is this a bug or am I doing something wrong?

notes: $$ defines a global variable

var a2 = Ti.UI.createAnimation();
a2.top = $$.platformHeight;
a2.duration = $$.animationDuration;
 
var cb2 = function (v){
    Ti.API.info('done animating out');
    v.fireEvent('close'); // this is firing before it should!           
};
 
stack.animate(a2,cb2(VIEW));

Since you're using the animation object to do the work, you should be listening to the object's 'complete' event to fire the callback.

Something like this should work:

a2.addEventListener('complete', function(){ cb2(VIEW); });

I couldn't find a way to prevent the callback getting called multiple times. But I noticed that the callback seemed to get called at both the start and end of the animation. So instead I implemented a hack which uses using a timeout as follows:

• set a timeout equal to 0.7 times the duration of your animation
• start the animation and set your callback function
• if your callback function gets called before your timeout has finished, ignore it
• if your callback function gets called and your timeout has finished, continue as normal

It's nasty, and I wish Appcelerator would fix this bug, but it works for now.

Hope this helps.

You are calling the callback with the view in your animate function, not passing it as a parameter. Indeed you are passing the returned value as the callback parameter. This means that you are calling the callback before the animation even starts.

Perhaps try something like:

stack.animate(a2, function(){ cb2(VIEW); });

or maybe (im not sure what value the callback function receives, if it gets the view, this should work)

stack.animate(a2, cb2);