Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26590] iOS: Animation never rotates counter-clockwise when set to -180 degrees

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionFixed
Resolution Date2018-11-29T14:39:40.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.0.0
ComponentsiOS
Labelsanimation, ios, rotation
ReporterJoshua Quick
AssigneeJoshua Quick
Created2018-11-22T05:08:14.000+0000
Updated2018-11-30T12:21:56.000+0000

Description

*Summary:* When attempting to rotate a view via an animation set to -180, it will wrongly rotate clockwise instead of counter-clockwise. Only 180 should rotate clockwise. Also, when setting up animation property "autoreverse" to true} and with a rotation of {{180, the initial animation will correctly rotate clockwise, but incorrectly autoreverse clockwise as well (doing a 360) instead of rotating backwards counter-clockwise. If "repeat" is set, then this autoreverse rotation bug will only happen on the final rotation. All of the other auto-reversed rotation will rotate in the correct direction. This is not an issue on Android. This is only an iOS issue. *Steps to reproduce:*

Build and run the below code on iOS.

Note that blue square rotate clockwise instead of counter-clockwise.

var SQUARE_SIZE = 160;
var window = Ti.UI.createWindow({
	backgroundColor: "white",
	fullscreen: true,
});
var squareView = Ti.UI.createLabel({
	text: "Test",
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	color: "white",
	backgroundColor: "blue",
	width: SQUARE_SIZE,
	height: SQUARE_SIZE,
});
window.add(squareView);
window.addEventListener("postlayout", function onLayout() {
	window.removeEventListener("postlayout", onLayout);
	var animation = Ti.UI.createAnimation({
		transform: Ti.UI.create2DMatrix().rotate(-180),
//		transform: Ti.UI.create2DMatrix().rotate(180),
		duration: 2000,
		autoreverse: true,
//		repeat: 2,
	});
	squareView.animate(animation);
});
window.open();
*Note:* This is an issue on Apple's end. Their animation feature will always take the shortest route to the animation's destination. Since the rotation range is -180 to 180 on iOS, this becomes a boundary issue and iOS will always choose to rotate clockwise instead of counter-clockwise. *Work-around:* Instead of setting rotation to -180, set it to -180 + 0.01 instead. This makes counter-clockwise the shortest route. This appear to be the only solution natively as well when using a transformation matrix for rotation.

Comments

  1. Joshua Quick 2018-11-22

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

    *Closing ticket*. Fix verified in SDK Version 8.0.0.v20181129161342. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10486

JSON Source