Project: titanium
Issue TIMOB-23423: Android: Add rotation, rotationX, rotationY, scaleX, scaleY to view
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: {code:java} 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(); {code}
Story points: 3