Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26563] TiAPI: 2DMatrix translate() coordinate units do not match between platforms

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-12-03T13:53:31.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.0.0
Componentsn/a
Labels2dmatrix, android, animation, breaking-change, ios, parity, scale, unit
ReporterJoshua Quick
AssigneeJoshua Quick
Created2018-11-15T02:40:46.000+0000
Updated2018-12-03T14:02:49.000+0000

Description

*Summary:* The 2DMatrix.translate() method's (x,y) values are handled inconsistently between platforms. On Android, the units are expected to be pixels (aka: "px"). On iOS, the units are expected to be dips (aka: "dp"). The translate() method should be changed to use the units assigned to the "tiapp.xml" file's "ti.ui.defaultunit" property. This way they would be handled consistently between platforms and the units which match the coordinates used by the window's views (makes the math easier to calculate). *Steps to reproduce:* For this animation test, a blue square is supposed to move from the top-left corner to the bottom-right corner.

Set "tiapp.xml" property "ti.ui.defaultunit" to "dp".

Build and run on iOS.

Notice that the blue square correctly animated to bottom-right corner. (This is good.)

Set "tiapp.xml" property "ti.ui.defaultunit" to "px".

Build and run on iOS.

Notice that the blue square moves off screen, past the bottom-right corner. (This is the bug.)

Build and run on Android.

Notice that the blue square correctly animated to bottom-right corner. (This is good.)

Set "tiapp.xml" property "ti.ui.defaultunit" to "dp".

Build and run on Android.

Notice that the blue square does not reach the bottom-right corner. (This is the bug.)

var SQUARE_SIZE = 80;
var window = Ti.UI.createWindow({
	backgroundColor: "white",
	fullscreen: true,
});
var squareView = Ti.UI.createView({
	backgroundColor: "blue",
	left: 0,
	top: 0,
	width: SQUARE_SIZE,
	height: SQUARE_SIZE,
});
window.add(squareView);
window.addEventListener("postlayout", function() {
	if (!squareView.wasAnimated) {
		var windowSize = window.size;
		var newX = windowSize.width - SQUARE_SIZE;
		var newY = windowSize.height - SQUARE_SIZE;
		var animation = Ti.UI.createAnimation({
			transform: Ti.UI.create2DMatrix().translate(newX, newY),
			duration: 2000,
		});
		squareView.wasAnimated = true;
		squareView.animate(animation);
	}
});
window.open();
*Note:* This is not an issue with 2DMatrix.scale() since scaling is a "relative" operation. Versus translations works with "absolute" coordinates.

Comments

  1. Joshua Quick 2018-11-15

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/10472
  2. Samir Mohammed 2018-11-29

    *FR Passed.* Awaiting for CR.
  3. Samir Mohammed 2018-12-03

    *Closing ticket.* Verified fix in SDK Version 8.0.0.v20181130132038. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10472

JSON Source