[TIMOB-23423] Android: Add rotation, rotationX, rotationY, scaleX, scaleY to view
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Critical |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2016-06-27T06:48:59.000+0000 |
Affected Version/s | Release 5.2.2 |
Fix Version/s | Release 6.0.0 |
Components | Android |
Labels | android, community, rotate, scale, transform |
Reporter | Michael Gangolf |
Assignee | Hieu Pham |
Created | 2016-05-21T14:09:10.000+0000 |
Updated | 2016-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();
PR: https://github.com/appcelerator/titanium_mobile/pull/8010
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
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)
Thanks [~michael]! Will appreciate if you could create a parity ticket for the iOS :)
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