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

iOS (Parity): Add rotation, rotationX, rotationY, scaleX, scaleY to view

    Details

      Description

      Problem:
      Android (https://jira.appcelerator.org/browse/TIMOB-23423) will soon support setting rotation (x,y,z) and scaling (x,y) of a view without the need of 2dmatrix which is faster and allows 3D rotations (rotation in x,y).

      Solution:
      In iOS this could be achieved with CATransform3DRotate/CATransform3DScale. The properties (+getter/setter) should look like this:

      • view.rotation
      • view.rotationX
      • view.rotationY
      • view.scaleX
      • view.scaleY

      Android 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:
              Unassigned
              Reporter:
              michael Michael Gangolf
            • Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:

                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