Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Multiple rotates of view with animation

Hi,

I'm trying to rotate an ImageView using an animation. After first rotation I want to rotate it again.
E.g.:

  1. rotate by 90 degrees -> make view rotate from 0 to 90 degrees
  2. rotate by another 90 degrees -> make view rotate from 90 to 180 degrees

That's how I try to do it inside an Click event listener (img1 is the ImageView):

function onClick(e)
{
    var a = Titanium.UI.createAnimation();
    var t = Ti.UI.create2DMatrix();
    t = t.rotate(90);
    a.transform = t;
    a.duration = 1000;
    img1.animate(a);
}

I also tried to increase the rotation to 180 degrees the second time:

var angle = 90;
function onClick(e)
{
    var a = Titanium.UI.createAnimation();
    var t = Ti.UI.create2DMatrix();
    t = t.rotate(angle);
    angle += 90;
    a.transform = t;
    a.duration = 1000;
    img1.animate(a);
}

With both versions the second animation "resets" the view's rotation and rotates it to the specified angle starting from 0 degrees. How can I make it not to "reset" but start from the angle it gained after the first rotation?

Thanks in advance!

— asked March 30th 2010 by Robert Mai
  • animation
  • mobile
  • rotate
0 Comments

3 Answers

  • Accepted Answer

    You need to store your 2DMatrix object between transformations, or your app will forget what has happened.

    Try moving var t = Ti.UI.create2DMatrix(); outside the function.

    — answered March 30th 2010 by James K
    permalink
    0 Comments
  • This post should be helpful as well.

    — answered March 30th 2010 by TZ Martin
    permalink
    0 Comments
  • Here is an example that works for me:

        var rotation = 0;
    
        btnSpin.addEventListener('click', function(e) {
                rotation = rotation + 90;
                var t = Ti.UI.create2DMatrix();
    
                t = t.rotate(rotation);
                var a = Titanium.UI.createAnimation({
                        anchorPoint : {
                            x : 0.5,
                            y : 0.5
                        },
                        duration : 1000
                    });
                a.transform = t;
    
                imageView.animate(a);
    
            });
    
    — answered June 17th 2015 by María Jesús García
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.