{ "id": "94780", "key": "TIMOB-9921", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "7", "description": "", "name": "Invalid" }, "resolutiondate": "2012-07-11T20:23:23.000+0000", "created": "2012-07-10T14:08:23.000+0000", "priority": { "name": "Medium", "id": "3" }, "labels": [ "parity" ], "versions": [ { "id": "13271", "description": "Release 2.1.0", "name": "Release 2.1.0", "archived": false, "released": true, "releaseDate": "2012-06-29" } ], "issuelinks": [], "assignee": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "updated": "2014-01-28T23:58:20.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "11500", "name": "MobileWeb", "description": "Mobile Web (HTML) Platform" } ], "description": "h2. Expected result\r\n\r\nOnce 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.\r\n\r\nh2. Actual result\r\n\r\nThe 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).\r\n\r\nThe results are the same whether you use the inline-callback or listen for the 'complete' event and call a new animation.\r\n\r\nh2. Sample code\r\n\r\n{code}\r\nvar win = Ti.UI.createWindow({\r\n\tbackgroundColor:'white'\r\n});\r\n\r\nvar titleLabel = Ti.UI.createLabel({\r\n\tleft:0, top:0,\r\n\twidth:'100%', height: '60dp',\r\n\ttext: 'Initial title',\r\n\tcolor: 'white',\r\n\tbackgroundColor:'#B32D00',\r\n\ttextAlign: 'center',\r\n\tfont: {\r\n\t\tfontWeight:'bold'\r\n\t}\r\n});\r\nwin.add(titleLabel);\r\n\r\nvar updateTitle = function(title){\r\n\ttitleLabel.animate({\r\n\t\tleft:-1000, top: 0,\r\n\t\tduration:2000\r\n\t}, function() {\r\n\t\t// THIS SHOULDN'T HAPPEN UNTIL THE LABEL HAS ANIMATED OFF THE SCREEN\r\n\t\ttitleLabel.animate({\r\n\t\t\tleft:0, top: 0,\r\n\t\t\tduration:2000\r\n\t\t}, function() {\r\n\t\t\t// AND THIS REALLY SHOULD NOT HAPPEN TILL AFTER BOTH ANIMATIONS ARE DONE\r\n\t\t\ttitleLabel.text=title;\r\n\t\t});\r\n\t});\r\n\ttitleLabel.text = title;\r\n};\r\n\r\nvar aOut = Ti.UI.createAnimation({\r\n\tleft: -1000, top: 0,\r\n\tduration: 2000\r\n});\r\nvar aBack = Ti.UI.createAnimation({\r\n\tleft: 0, top: 0,\r\n\tduration: 2000\r\n});\r\naOut.addEventListener('complete', function() {\r\n\t// THIS SHOULDN'T FIRE UNTIL THE LABEL HAS ANIMATED OFF THE SCREEN\r\n\ttitleLabel.animate(aBack);\r\n});\r\naBack.addEventListener('complete', function() {\r\n\t// AND THIS REALLY SHOULD NOT HAPPEN TILL AFTER BOTH ANIMATIONS ARE DONE\r\n\ttitleLabel.text = 'Click - Events';\r\n});\r\n\r\nvar updateTitle2 = function() {\r\n\ttitleLabel.animate(aOut);\r\n}\r\n\r\n// create a button that when clicked will animate the label\r\nvar btn = Ti.UI.createButton({\r\n\theight:'40dp',\r\n\twidth:'200dp',\r\n\tbottom: '60dp',\r\n\ttitle:'Click - Callbacks'\r\n});\r\nbtn.addEventListener('click', function(){\r\n\tupdateTitle('With Callbacks');\r\n});\r\nwin.add(btn);\r\n\r\n// create another button that when clicked will animate the label using the event listeners\r\nvar btn2 = Ti.UI.createButton({\r\n\theight:'40dp',\r\n\twidth:'200dp',\r\n\tbottom: '10dp',\r\n\ttitle:'Click - Event'\r\n});\r\nbtn2.addEventListener('click', function(){\r\n\tupdateTitle('With Events');\r\n});\r\nwin.add(btn2);\r\n\r\nwin.open();\r\n{code}\r\n", "attachment": [], "flagged": false, "summary": "Mobile Web: animation callback fired immediately (before animation has completed)", "creator": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "subtasks": [], "reporter": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "environment": "OS X Lion, TiSDK 2.1GA, also tested with 1.8.2 and 2.0.2GA\r\niOS simulator, Mobile Web: Chrome, Android device: Galaxy Nexus running Android 4.0.4", "comment": { "comments": [ { "id": "202471", "author": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "body": "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.", "updateAuthor": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "created": "2012-07-10T16:49:27.000+0000", "updated": "2012-07-10T16:49:27.000+0000" }, { "id": "202508", "author": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "body": "I am only able to get it to do what you say in the iOS 6 beta Mobile Safari. Strange indeed.", "updateAuthor": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "created": "2012-07-10T20:55:04.000+0000", "updated": "2012-07-10T20:55:04.000+0000" }, { "id": "202634", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "Chris, see http://www.youtube.com/watch?v=oYN1oFzrUwM demoing on Chrome v20.0.1132.47", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2012-07-11T06:54:47.000+0000", "updated": "2012-07-11T06:54:47.000+0000" }, { "id": "202706", "author": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "body": "The animation complete callbacks are firing as expected. The code example is flawed.\r\n\r\nBoth the \"callback\" and \"event\" buttons use the callback version.\r\n\r\nThe code example also sets \"titleLabel.text = title\" after the animation is started, then sets \"titleLabel.text = title\" again after the animation completes.\r\n\r\nIf the code example is fixed, then the results would be as expected.", "updateAuthor": { "name": "cbarber", "key": "cbarber", "displayName": "Chris Barber", "active": true, "timeZone": "America/Chicago" }, "created": "2012-07-11T11:59:56.000+0000", "updated": "2012-07-11T11:59:56.000+0000" }, { "id": "202707", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "*facepalm*", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2012-07-11T12:09:19.000+0000", "updated": "2012-07-11T12:09:19.000+0000" } ], "maxResults": 5, "total": 5, "startAt": 0 } } }