[TIMOB-2841] Android: Rotation is not honored.

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2011-04-17T02:00:13.000+0000
Affected Version/s	n/a
Fix Version/s	Release 1.6.0 M06
Components	Android
Labels	android, defect, enterprise, release-1.6.0, reported-1.6.0, rplist
Reporter	Fred Spencer
Assignee	Don Thorp
Created	2011-04-15T03:30:47.000+0000
Updated	2011-04-17T02:00:13.000+0000

Description

Rotation is not honored on a view. HTC Evo 2.2

var win = Ti.UI.createWindow({ backgroundColor:'#000' });
var view = Ti.UI.createView({ width:100, height:100, backgroundColor:'#f00' });
var overlay = Ti.UI.createView({ top:0, left:0, right:0, bottom:0 });
var rotateSlider = Ti.UI.createSlider({ left:10, right:10, bottom:10, height:30, min:0, max:359 });
var scaleSlider = Ti.UI.createSlider({ left:10, right:10, bottom:50, height:30, min:30, max:200 });

var t = Ti.UI.create2DMatrix();

function moveView(e) {
    view.animate({
        transform:t,
        center: {
            x: e.x,
            y: e.y
        },
        duration: 0
    });
    
    view.center = {
        x: e.x,
        y: e.y
    };
    view.transform = t;
}


function rotateView(e) {
    t = t.rotate(e.value);
    
    view.animate({ transform:t, duration:1 });
    view.transform = t;
}

function scaleView(e) {
    view.animate({
        width:(e.value * 0.01) * 100,
        height:(e.value * 0.01) * 100,
        duration:0
    });
}

rotateSlider.addEventListener('change', rotateView);
scaleSlider.addEventListener('change', scaleView);
overlay.addEventListener('touchmove', moveView);

win.add(view);
win.add(overlay);
win.add(rotateSlider);
win.add(scaleSlider);

win.open();

Attachments

File	Date	Size
img_0408.MOV	2011-04-15T03:30:48.000+0000	2985470

Comments

Marshall Culpepper 2011-04-15

(from [0e1d3bf52c8d2e3b1d4d46ee9de361941da3aaab]) refactor Ti2DMatrix and animations to make use of actual Android Matrices. Changing a view's
transform does the right thing now, but could
still use more optimization. More work will be
needed for rotate and scale animations to use a
correct anchorPoint relative the view's size.
Added a default "null" for callbacks so we don't
try to construct one for APIs that use optional
KrollCallbacks. [#2841 state:fixed-in-qa]
https://github.com/appcelerator/titanium_mobile/commit/0e1d3bf52c8d2e3b1d4d46ee9de361941da3aaab"> https://github.com/appcelerator/titanium_mobile/commit/0e1d3bf52c8d...

Marshall Culpepper 2011-04-15

UPDATE : I've modified this example to take into account the new changes to matrix and relative anchor points

   
   var view = Ti.UI.createView({ width:100, height:100, backgroundColor:'#f00' });
   var overlay = Ti.UI.createView({ top: 0, left: 0, right: 0, bottom: 151 });
   var scaleSlider = Ti.UI.createSlider({ left:10, right:100, bottom:150, height:50, min:30, max:200, value:100 });
   var scaleLabel = Ti.UI.createLabel({ right: 10, width: 80, bottom:150, height:50, text: '100%', color: 'black'});
   var rotateSlider = Ti.UI.createSlider({ left:10, right:100, bottom:50, height:50, min:0, max:359 });
   var rotateLabel = Ti.UI.createLabel({ right: 10, width: 80, bottom:50, height:50, text: '0d', color: 'black'});
   
   var rotate = 0;
   var scale = 1.0;
   
   function moveView(e) {
       view.center = {
           x: e.x,
           y: e.y
       };
   }
   
   function rotateView(e) {
       Ti.API.debug("rotate: " + e.value);
       rotate = e.value;
       rotateLabel.text = rotate + "d";
       transformView(e);
   }
   
   function scaleView(e) {
       Ti.API.debug("scale: " + (e.value * 0.01));
       scale = e.value * 0.01;
       scaleLabel.text = e.value + "%";
       transformView(e);
   }
   
   var filter = 300; // wait 300ms between transform updates
   var time = new Date().getTime();
   function transformView(e) {
       var now = new Date().getTime();
       if (now - time > filter)
       {
           view.transform = Ti.UI.create2DMatrix({ rotate: rotate, anchorPoint: { x: 0.5, y: 0.5 } }).scale(scale);
           time = now;
       }
   }
   
   rotateSlider.addEventListener('change', rotateView);
   scaleSlider.addEventListener('change', scaleView);
   overlay.addEventListener('touchmove', moveView);
   
   win.add(view);
   win.add(overlay);
   win.add(rotateSlider);
   win.add(rotateLabel);
   win.add(scaleSlider);
   win.add(scaleLabel);

Marshall Culpepper 2011-04-15

(from [5b58229a4a9ebaf4f37a9e7e9264f94005d0a39c]) fix for iterating back in the matrix linked list, don't even try to interpolate frames when the user supplies a transform. this makes
constant transform application much smoother [#2841] [#2873]
https://github.com/appcelerator/titanium_mobile/commit/5b58229a4a9ebaf4f37a9e7e9264f94005d0a39c"> https://github.com/appcelerator/titanium_mobile/commit/5b58229a4a9e...
Opie Cyrus 2011-04-15

Verified with test from Marshall on 2.2 emulator.

JSON Source