[TIMOB-26590] iOS: Animation never rotates counter-clockwise when set to -180 degrees
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2018-11-29T14:39:40.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 8.0.0 |
Components | iOS |
Labels | animation, ios, rotation |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2018-11-22T05:08:14.000+0000 |
Updated | 2018-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.
PR (master): https://github.com/appcelerator/titanium_mobile/pull/10486
*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