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();
TIMOB-6658 is still valid, but this one is apparently not. Labels don't change with corrected code sample.