Expected result
Once an animation is _done_ the callback function would be invoked. In the following code, the label's text should not change until after the label has been moved off the screen.
Actual result
The callback is invoked immediately when the initial animation begins. The label changes immediately, then the label animates off the screen. With iOS and Mobile Web, the initial animation proceeds, and once done the label animates back onto the screen. On Android, the label never returns (probably due to TIMOB-6658).
The results are the same whether you use the inline-callback or listen for the 'complete' event and call a new animation.
Sample code
var win = Ti.UI.createWindow({
backgroundColor:'white'
});
var titleLabel = Ti.UI.createLabel({
left:0, top:0,
width:'100%', height: '60dp',
text: 'Initial title',
color: 'white',
backgroundColor:'#B32D00',
textAlign: 'center',
font: {
fontWeight:'bold'
}
});
win.add(titleLabel);
var updateTitle = function(title){
titleLabel.animate({
left:-1000, top: 0,
duration:2000
}, function() {
// THIS SHOULDN'T HAPPEN UNTIL THE LABEL HAS ANIMATED OFF THE SCREEN
titleLabel.animate({
left:0, top: 0,
duration:2000
}, function() {
// AND THIS REALLY SHOULD NOT HAPPEN TILL AFTER BOTH ANIMATIONS ARE DONE
titleLabel.text=title;
});
});
titleLabel.text = title;
};
var aOut = Ti.UI.createAnimation({
left: -1000, top: 0,
duration: 2000
});
var aBack = Ti.UI.createAnimation({
left: 0, top: 0,
duration: 2000
});
aOut.addEventListener('complete', function() {
// THIS SHOULDN'T FIRE UNTIL THE LABEL HAS ANIMATED OFF THE SCREEN
titleLabel.animate(aBack);
});
aBack.addEventListener('complete', function() {
// AND THIS REALLY SHOULD NOT HAPPEN TILL AFTER BOTH ANIMATIONS ARE DONE
titleLabel.text = 'Click - Events';
});
var updateTitle2 = function() {
titleLabel.animate(aOut);
}
// create a button that when clicked will animate the label
var btn = Ti.UI.createButton({
height:'40dp',
width:'200dp',
bottom: '60dp',
title:'Click - Callbacks'
});
btn.addEventListener('click', function(){
updateTitle('With Callbacks');
});
win.add(btn);
// create another button that when clicked will animate the label using the event listeners
var btn2 = Ti.UI.createButton({
height:'40dp',
width:'200dp',
bottom: '10dp',
title:'Click - Event'
});
btn2.addEventListener('click', function(){
updateTitle('With Events');
});
win.add(btn2);
win.open();
Are you sure this is a Mobile Web bug? I tested with 2.1.0 and it works just fine. I also tested it with the soon to be released shiny new totally rad animation system and it also works fine.
I am only able to get it to do what you say in the iOS 6 beta Mobile Safari. Strange indeed.
Chris, see http://www.youtube.com/watch?v=oYN1oFzrUwM demoing on Chrome v20.0.1132.47
The animation complete callbacks are firing as expected. The code example is flawed. Both the "callback" and "event" buttons use the callback version. The code example also sets "titleLabel.text = title" after the animation is started, then sets "titleLabel.text = title" again after the animation completes. If the code example is fixed, then the results would be as expected.
*facepalm*