[TIMOB-7440] Android: 2DMatrix initalizer doesn't work properly when both "scale" and "rotate" are specified

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2013-05-10T04:36:41.000+0000
Affected Version/s	Release 3.1.0
Fix Version/s	2013 Sprint 10 Core, 2013 Sprint 10, Release 3.2.0
Components	Android
Labels	module_animation, parity, qe-manualtest, tbs-2.1.0
Reporter	Arthur Evans
Assignee	Josh Roesslein
Created	2012-01-26T17:39:21.000+0000
Updated	2014-08-08T00:34:15.000+0000

Description

Both Android and iOS appear to accept the same initializer to create2DMatrix. This dictionary object can contain scale and rotate properties, like so:

var m = Ti.UI.create2DMatrix({ 
    scale: 2,
    rotate: 45
);

Applying this matrix to a view on iOS produces the expected results: the view is scaled 2x and rotated 45 degrees. However, on Android the view is scaled 2x and translated, but not rotated. Using either scale: or rotate: on its own works on both systems. The following code produces the correct results on Android:

var m = Ti.UI.create2DMatrix({ 
    rotate: 45
);
m = m.scale(2, 2);

Comments

Shameer Jan 2013-03-20

The problem reproduces with release 3.0.2 and master release 3.1.0 tested on Titanium Studio, build: 3.0.2.201302191606 Titanium SDK version: 3.1.0 Titanium SDK version: 3.0.2 Device: Samsung galaxy s duos Android version: 4.0.4 Android Emulator: Android SDK version: 2.2 iOS iPhone Simulator: iOS SDK version: 6.0 It works fine on IOS iphone simulator

Bill Dawson 2013-05-09

Test case / fail case

Run an app with this app.js:

   Ti.UI.backgroundColor = "blue";
   var win = Titanium.UI.createWindow({  
   		title:'Test',
   		backgroundColor:'blue',
   		exitOnClose: true,
   		orientationModes: [Ti.UI.PORTRAIT]
   	}),
   	btn = Ti.UI.createButton({
   		title: "Rotate/Scale",
   		height: 48, top: "40%", left: "25%", width: 150
   	});
   
   win.add(btn);
   
   btn.addEventListener("click", function() {
   	/** THIS IS THE CODE FROM THE TICKET **/
   	var matrix = Ti.UI.create2DMatrix({
   		scale: 2,
   		rotate: 45
   	});
   	/*************************************/
   
   	btn.animate({
   		transform: matrix,
   		duration: 500
   	});
   });
   
   win.add(Ti.UI.createLabel({
   	text: "When clicked once, the button should double size AND rotate 45°. Fail case is just doubling size and failing to rotate.",
   	bottom: 16, left: 16, right: 16, height: "auto",
   	color: "white"
   }));
   
   win.open();

When you click the button, it should *both* scale up (grow) *and* rotate 45°. The fail case was that it would scale up but *not* rotate.

Bill Dawson 2013-05-09

PR ready: https://github.com/appcelerator/titanium_mobile/pull/4247
Wilson Luu 2013-10-23

Closing ticket as fixed. Verified using Bill's test case that the button both scale up and rotate 45°. Tested on: Titanium Studio, build: 3.2.0.201310230548 OS: Mac OS X Mountain Lion (10.8.5) SDK build: 3.2.0.v20131022171645 Ti CLI: 3.2.0 (72f7426b4ee6c2d2883c666d5b7e03906a16012f) Devices: Samsung Galaxy S3 (4.0.4), Samsung Galaxy S4 (4.2.2)

JSON Source