Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9920] iOS: animation callback fired immediately (before animation has completed)

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2012-07-11T20:22:14.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sn/a
ComponentsiOS
Labelscore, parity
ReporterTim Poulsen
AssigneeNeeraj Gupta
Created2012-07-10T14:07:36.000+0000
Updated2012-07-11T20:22:20.000+0000

Description

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();

Comments

  1. Tim Poulsen 2012-07-11

    With corrected sample code, this works as expected.

JSON Source