Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23423] Android: Add rotation, rotationX, rotationY, scaleX, scaleY to view

GitHub Issuen/a
TypeImprovement
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2016-06-27T06:48:59.000+0000
Affected Version/sRelease 5.2.2
Fix Version/sRelease 6.0.0
ComponentsAndroid
Labelsandroid, community, rotate, scale, transform
ReporterMichael Gangolf
AssigneeHieu Pham
Created2016-05-21T14:09:10.000+0000
Updated2016-08-12T22:36:35.000+0000

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();

Comments

  1. Michael Gangolf 2016-05-21

    PR: https://github.com/appcelerator/titanium_mobile/pull/8010
  2. Hieu Pham 2016-05-24

    PR tested and looks good. Waiting for 5.4.0 branch to be created so we can merge it into master. Thanks for the PR
  3. Michael Gangolf 2016-05-24

    Thanks! Perhaps someone can implement rotationX/Y and scaleX/Y for parity on iOS. CATransform3DRotate/CATransform3DScale should be equivalent functions (they are used in the 3dmatrix already)
  4. Chee Kiat Ng 2016-05-25

    Thanks [~michael]! Will appreciate if you could create a parity ticket for the iOS :)
  5. Lokesh Choudhary 2016-08-12

    Verified the improvement. Rotation, rotation X, rotation Y, scale X, scale Y are now added to view. Closing. Environment: Appc Studio : 4.7.0.201607250649 Ti SDK : 6.0.0.v20160811221444 Ti CLI : 5.0.9 Alloy : 1.9.1 MAC El Capitan : 10.11.6 Appc NPM : 4.2.7 Appc CLI : 6.0.0-24 Node: 4.4.4 Nexus 5 - Android 6.0.1

JSON Source