[TIMOB-9825] Android: Animations don't work with 'dp' values

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-08-16T14:36:57.000+0000
Affected Version/s	Release 2.0.2, Release 2.1.0
Fix Version/s	Sprint 2012-15 Core, Release 2.1.2, Release 3.0.0
Components	Android
Labels	SupportTeam, core, module_animation, qe-review, qe-testadded
Reporter	Varun Joshi
Assignee	Bill Dawson
Created	2012-06-27T15:06:44.000+0000
Updated	2012-12-21T00:01:35.000+0000

Description

Problem

When trying to run an animation such as this on Android: var openAnimation = Ti.UI.createAnimation({left :'35dp',duration : 350}); An error is thrown: Uncaught Error: unable to parse '35dp' as integer

Steps to Reproduce

Please run the sample code below to reproduce the issue: {noformat} var win = Ti.UI.createWindow({ backgroundColor:'white' }); win.open(); var closingLabel = Titanium.UI.createLabel({ text:'The End', height:'auto', width:'auto', color:'#fff', font:{fontSize:12}, textAlign:'center', opacity: 0 }); win.add(closingLabel); closingLabel.animate(Titanium.UI.createAnimation({ opacity: 100, duration: 2500, left:'35dp', transform: Titanium.UI.create2DMatrix({ scale: 1.5 }) })); {noformat} Please see the attached screenshot of the error too.

Attachments

File	Date	Size
Screen Shot 2012-06-27 at 3.02.21 PM.png	2012-06-27T15:06:44.000+0000	590134

Comments

Bill Dawson 2012-07-19

we definitely need to fix, but of course a simple workaround would be to set <property name="ti.ui.defaultunit">dip</property> in tiapp.xml so to as to avoid needing to ever specify "dp" as part of unit properties. TIMOB-9954, which was recently merged, helped to get that to work.

Bill Dawson 2012-07-19

Test / Fail Case

* Create an app with this app.js:

   var win = Ti.UI.createWindow({
   	backgroundColor : '#444',
   	exitOnClose : true
   });
   
   var v1 = Ti.UI.createView({
   	top: "100dip",
   	left: "110dip",
   	height: "100dip",
   	width: "100dip",
   	backgroundColor: "blue"
   });
   win.add(v1);
   
   v1.add(Ti.UI.createLabel({
   	color: "yellow", text: "top: '100dp', height: '100dp'"
   }));
   
   var v2 = Ti.UI.createView({
   	top: "0dp",
   	left: "0dp",
   	height: "50dp",
   	width: "50dp",
   	backgroundColor: "red"
   });
   win.add(v2);
   
   var btn = Ti.UI.createButton({
   	bottom: "50dp", left: "10dp", right: "10dp",
   	title: "Move red next to blue"
   });
   win.add(btn);
   btn.addEventListener("click", function() {
   	v2.animate({top: "100dp", height: "100dp", width: "100dp", left: "10dp", duration: 1000});
   });
   
   win.open();

* The point of the test is to move the Red box down to be next to the Blue box (flush with left side) and make it the same size as the blue box while doing so. * Click the button, which starts an animation that uses "dp" for top, height, width and left properties. I.e., it's a simultaneous translate+size animation to move the red box down and make it the same size as the blue box. * The fail case is that you'll get a runtime error right away because we didn't support "dp" (or other unit specifiers). When testing the fix, it should work fine.

Bill Dawson 2012-07-19

Pull request ready https://github.com/appcelerator/titanium_mobile/pull/2606
Rima Umbrasas 2012-08-10

Verified fixed with mobile sdk-2.2.0.v20120810080115 Titanium Studio, build: 2.1.1.201207271312 Device: Android emulator
Bill Dawson 2012-08-16

PR for 2_1_X branch created: https://github.com/appcelerator/titanium_mobile/pull/2761
Allen Yeung 2012-08-16

Re-opening to update labels.

JSON Source