[TIMOB-19351] Windows: Support animation values using units

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2016-06-02T14:28:24.000+0000
Affected Version/s	Release 4.1.0
Fix Version/s	Release 5.4.0
Components	Windows
Labels	qe-5.4.0
Reporter	Christopher Williams
Assignee	Gary Mathews
Created	2015-08-13T21:11:00.000+0000
Updated	2016-06-29T21:09:30.000+0000

Description

Our animation code assumes pixels for units, regardless of whether some other set of units are specified. Looking at Android, assuming pixels if no unit is specified is what we should do (though why wouldn't we use ti.ui.defaultunit?) - but we do need to support dp/in/cm/em etc and convert to pixels internally.

Comments

Gary Mathews 2016-05-25

master: https://github.com/appcelerator/titanium_mobile_windows/pull/719

Christopher Williams 2016-06-02

- Add support for % cm mm cm em pt pc in px dp dip in width height top left (bottom and right are not implemented, see TIMOB-18750) - Fixed crash when animating width or height from 0 - Fixed width and height not being retained after animation Here's some tests cases. Please note that the animations happen as expected (right positioning, and we don't see an immediate jump form start position to end position). Also, you might want to test with other units, these test cases just use percentages, but it should be tested with values like '100px', '1in', '2345cm', etc.

TEST CASE # 1

Scale height from 0 to 100%

   var win = Ti.UI.createWindow({backgroundColor: 'black'}),
       view = Ti.UI.createView({backgroundColor: 'red', top: 0, left: 0, width:'10%', height: 0}),
       animation = Ti.UI.createAnimation({height: "100%", curve: Ti.UI.ANIMATION_CURVE_EASE_OUT, duration: 2000});
   view.animate(animation);
   win.add(view);
   win.open();

TEST CASE # 2

Scale width from 0 to 100%

   var win = Ti.UI.createWindow({backgroundColor: 'black'}),
       view = Ti.UI.createView({backgroundColor: 'red', top: 0, left: 0, width:'0', height: '10%'}),
       animation = Ti.UI.createAnimation({width: '100%', curve: Ti.UI.ANIMATION_CURVE_EASE_OUT, duration: 2000});
   view.animate(animation);
   win.add(view);
   win.open();

TEST CASE # 3

Transform left from 0 to 90%

   var win = Ti.UI.createWindow({backgroundColor: 'black'}),
       view = Ti.UI.createView({backgroundColor: 'red', top: 0, left: 0, width:'10%', height: '10%'}),
       animation = Ti.UI.createAnimation({left: '90%', curve: Ti.UI.ANIMATION_CURVE_EASE_OUT, duration: 2000});
   view.animate(animation);
   win.add(view);
   win.open();

TEST CASE # 4

Transform top from 0 to 90%

   var win = Ti.UI.createWindow({backgroundColor: 'black'}),
       view = Ti.UI.createView({backgroundColor: 'red', top: 0, left: 0, width:'10%', height: '10%'}),
       animation = Ti.UI.createAnimation({top: '90%', curve: Ti.UI.ANIMATION_CURVE_EASE_OUT, duration: 2000});
   view.animate(animation);
   win.add(view);
   win.open();

Harry Bryant 2016-06-29

Verified as fixed, Tested all four test cases above, using different value units (% , px , in , cm). Tested on: Windows 10 Pro Windows Phone 10.0 (Microsoft Lumia 640 LTE) Appc Studio: 4.7.0.201606220541 Ti SDK: 5.4.0.v20160627224205 Appc NPM: 4.2.7-2 Appc Core: 5.4.0-20 Node: v4.4.4 *Closing Ticket.*

JSON Source