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

Android: Add rotation, rotationX, rotationY, scaleX, scaleY to view

    Details

    • Story Points:
      3
    • Sprint:
      2016 Sprint 13 SDK

      Description

      Allow to set rotation (x,y,z) and scaling (x,y) to a view without the need of 2dmatrix. Similar to the existing translationX(), translationY() (with a small bugfix allowing to use views with borders, too).

      With these settings it is possible to do smooth rotation/scaling in a drag event.
      GIF comparing 2dmatrix vs setters: http://migaweb.de/matrix.gif

      Reference:
      https://developer.android.com/reference/android/view/View.html#setRotation%28float%29

      Example:

      var win = Ti.UI.createWindow({
          backgroundColor: "white"
      });
      var view = Ti.UI.createView({
          width: 150,
          height: 300,
          backgroundColor: "red",
          borderRadius: 10, touchEnabled:false
      })
      win.add(view);
      var sx = 0;
      var sy = 0;
      var cx = 0;
      var cy = 0;
      var dpi = Ti.Platform.displayCaps.logicalDensityFactor;
      var WIDTH = Ti.Platform.displayCaps.platformWidth / dpi;
      var HEIGHT = Ti.Platform.displayCaps.platformHeight / dpi;
       
      function onTouchStart(e) {
          // start movement
          sx = e.x;
          sy = e.y;
          cx = e.x;
          cy = e.y;
      }
       
      function onTouchMove(e) {
         var xDistance = cx - sx;
          var yDistance = cy - sy;
       
          var rotationStrength = Math.min(xDistance / (WIDTH), 1);
          var rotationAngel = (2 * Math.PI * rotationStrength / 16);
          
          var rotationStrengthX = Math.min(yDistance / (HEIGHT), 1);
          var rotationAngelX = (2 * Math.PI * rotationStrengthX / 16);
              
          var scaleStrength = 1 - Math.abs(rotationStrength) / 4;
          var scale = Math.max(scaleStrength, 0.93)
       
          view.rotation = rotationAngel * 20;
          view.rotationX = rotationAngelX * 20;
          view.translationX = xDistance;
          view.setTranslationY(yDistance);
          view.scaleX = scale;
          view.scaleY = scale;
       
          console.log(view.rotation);
          console.log(view.getScaleX());
       
          cx = e.x;
          cy = e.y;
      }
      win.addEventListener("touchmove", onTouchMove);
      win.addEventListener("touchstart", onTouchStart);
      win.open();
      

        Attachments

          Activity

            People

            • Assignee:
              hpham Hieu Pham
              Reporter:
              michael Michael Gangolf
              Reviewer:
              Hieu Pham
            • Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Source Code