Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26590

iOS: Animation never rotates counter-clockwise when set to -180 degrees

    Details

    • Story Points:
      9

      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:

      1. Build and run the below code on iOS.
      2. 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.

        Attachments

          Activity

            People

            • Assignee:
              jquick Joshua Quick
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Vijay Singh
              Tester:
              Samir Mohammed
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-6725
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code