[TIMOB-26586] iOS: Fixed animation bugs with auto-reverse ease-in/ease-out and 180 degree rotation

[jquick-axway]

JIRA:

• https://jira.appcelerator.org/browse/TIMOB-26586
• https://jira.appcelerator.org/browse/TIMOB-26590

Summary:

• TIMOB-26586 Fixed bug where auto-reverse bug with EASE_IN and EASE_OUT.
  • EASE_IN is supposed to EASE_OUT when reversed.
  • EASE_OUT is supposed to EASE_IN when reversed.
  • Not an issue with EASE_IN_OUT or LINEAR animation curves.
• TIMOB-26590 Fixed bug where animation rotation of -180 would rotate clockwise instead of counter-clockwise.
  • This is a limitation on Apple's end since min/max rotation is -180 and 180 respectively.
  • Only known native work-around for a transformation matrix based animation is to slightly offset from 180.

Test:

1. Build and run the below code on iOS.
2. Verify that all squares rotate clockwise 180 degrees and then rotate counter-clockwise 180 degrees back to their original position.
3. Verify that top-left EASE_IN square starts rotating clockwise slowly and then ends rotating counter-clockwise slowly. (The bug was it ended quickly.)
4. Verify that top-right EASE_OUT square starts rotating clockwise quickly and then ends rotating counter-clockwise quickly. (The bug was it ended slowly.)
5. Change the below code's 180 value to -180.
6. Rebuild and run on iOS.
7. Verify that all squares rotate counter-clockwise 180 degrees and then rotate clockwise 180 degrees back to their original position.

var SQUARE_SIZE = 100;
function createContainer(name, animationCurve) {
	var viewContainer = Ti.UI.createView({
		layout: "vertical",
		width: "50%",
		height: "50%",
	});
	viewContainer.add(Ti.UI.createLabel({
		text: name,
		color: "black",
		top: "5dp",
	}));
	var squareView = Ti.UI.createLabel({
		text: "Test",
		textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
		color: "white",
		backgroundColor: "blue",
		top: "15dp",
		width: SQUARE_SIZE,
		height: SQUARE_SIZE,
	});
	var animation = Ti.UI.createAnimation({
		transform: Ti.UI.create2DMatrix().rotate(180),
		curve: animationCurve,
		duration: 1000,
		autoreverse: true,
	});
	viewContainer.add(squareView);
	function doAnimation() {
		squareView.animate(animation, function() {
			setTimeout(function() {
				doAnimation();
			}, 1000);
		});
	}
	doAnimation();
	return viewContainer;
}

var window = Ti.UI.createWindow({
	backgroundColor: "white",
	fullscreen: true,
	layout: "horizontal",
});
window.add(createContainer("EASE_IN", Ti.UI.ANIMATION_CURVE_EASE_IN));
window.add(createContainer("EASE_OUT", Ti.UI.ANIMATION_CURVE_EASE_OUT));
window.add(createContainer("EASE_IN_OUT", Ti.UI.ANIMATION_CURVE_EASE_IN_OUT));
window.add(createContainer("LINEAR", Ti.UI.ANIMATION_CURVE_LINEAR));
window.open();

[build]

	Messages
📖	💾 Here's the generated SDK zipfile.

Generated by 🚫 dangerJS

[vijaysingh-axway]

CR passed.

[ssjsamir]

FR Passed Animation curves ease-in/ease-out and now auto-reverses correctly.

Test Steps

1. Created a new SDK build from this PR
2. Created a new titanium application
3. Copied the test case from the description
4. Ran the App
5. Able to see the blue squares easing in and out correctly going clockwise
6. Changed rotation to -180
7. Able to see the blue squares easing in and out correctly going counter-clockwise

Test Environment

APPC Studio: 5.1.0.201808080937
iPhone 7 Sim (iOS 12.1)
APPC CLI: 7.0.8
Operating System Name: Mac OS Mojave
Operating System Version: 10.14.1
Node.js Version: 8.9.1
Xcode 10.1