Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

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

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2011-04-17T02:00:13.000+0000
Affected Version/sn/a
Fix Version/sRelease 1.6.0 M06
ComponentsAndroid
Labelsandroid, defect, enterprise, release-1.6.0, reported-1.6.0, rplist
ReporterFred Spencer
AssigneeDon Thorp
Created2011-04-15T03:30:47.000+0000
Updated2011-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

FileDateSize
img_0408.MOV2011-04-15T03:30:48.000+00002985470

Comments

  1. 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...

  2. 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);
       
  3. 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...

  4. Opie Cyrus 2011-04-15

    Verified with test from Marshall on 2.2 emulator.

JSON Source