var angle = 90;
var a = Titanium.UI.createAnimation();
var t = Ti.UI.create2DMatrix();
a.duration = 1000;

function onClick(e)
{
    t = t.rotate(angle);
    a.transform = t;
    img1.animate(a);
    angle+=90; //This shouldn't be here!
}

t = t.rotate(90);

t = t.rotate(90);

12 Answers

• Maybe I should add: I'm trying all this with Android 2.1 SDK

• I'm having the same problem, and it's a serious one that we have to get working or we have no app, for the spinning is the basis of my program. Each time it does a rotation transform, it flickers to 0 first then moves. I put my source up (twice by accident) in this post: [http://developer.appcelerator.com/question/32961/continuous-rotation]
  Here is the basics:

  var t = Titanium.UI.create2DMatrix();
  var a = Titanium.UI.createAnimation();
  function spinIt() {
      currentRotation += spinRotation;
      if(currentRotation > 360) currentRotation -= 360;
      t = t.rotate(currentRotation);
      a.transform = t;
      Spinner.animate(a);
      if(spinning) {
          setTimeout(spinIt, spinSpeed);
      }
  }
  

  There really should be a simple way to do a 2DMatrix transform without doing an animate. I hope this is addressed in the soon to be released 1.4 update, but in the meantime, can anyone suggest a workaround? I'm also getting desperate for a solution..

• I submitted a ticket (#1457) on this problem, found at https://appcelerator.lighthouseapp.com/projects/32238/tickets/1457-rotate-transform-animate-flickers-to-rotate-0-with-each-turn

  I have everything working on my Sacred G App except this bug, and it's the most important part of it. I wish there is a simple way to apply a 2DMatrix transform without calling animate.. We will be soo happy when this functions right and I can release my meditation tool to the market, and I totally appreciate the Titanium community for doing what they do.

• this any good?

  
  var t = Ti.UI.create2DMatrix();
  button.addEventListener('dblclick', function()
  {
      t = t.rotate(90);
      var a = Titanium.UI.createAnimation();
      a.transform = t;
      button.animate(a);
  });
  

• Thanks Robert. I moved the createAnimation to the inside of the function, and it seemed slightly better since it wasn't flickering back to 0, but it was flickering to different rotation points. It's kind of weird, but it's jerky still.
  I also found when the spinSpeed is < 60 or so, it stops totally, and < 40 it crashes the app.. Already looks slow compared to my ActionScript version, but my fingers are crossed. It seems that calling the animate function to apply a transform bloats the call. Maybe I could help dig into the Titanium source codes and hunt for the fix, like a way to do this:

  t = t.rotate(currentRotation);
  Spinner.transform(t);
  //a.transform = t;
  //Spinner.animate(a);
  

  So adding a transform prototype to the basic UI display objects to instantly apply a 2DMatrix. Makes sense. The other option is optimizing the animate function when the duration = 0.. Any thoughts guys?

• Alan

  I think you can in fact apply an instant transform directly:

  t = t.rotate(currentRotation);
  Spinner.transform = t;
  

  There are examples of this in KitchenSink and the API shows the transform property as being common to most views and controls.

  Rotation transforms have sometimes produced unpredictable results for me though.

  James

• Yeah, calling Spinner.transform = t; was one of the first logical variations I attempted, but it doesn't draw any update at all. I went through all the KitchenSink examples and the only places .transform = is used is on an animation object. Even though it gives no errors doing that on an ImageView, it doesn't apply proper. Does anyone know how to update the stage when directly assigning a 2DMatrix transform to a view object? That'd be a great solution, but not an obvious one from the examples..
  Seems like there's a temporary workaround somewhere, but I think the only way to have this feature is in the source. It's just hard to hold on when my app is so close to going to market.. I'll just fine tune some new features in the meantime.

• I'm having the same problem. I think there is a bug for Android. using the same code multiple rotate works for iphone.

  I think the bug has something to do with "autoreverse" No matter what you set it at Android thinks it is true. Even if you set autoreverse to false in the example below the iphone thinks it is true so it is better to just leave it out.

  var a = Titanium.UI.createAnimation();
  a.autoreverse = false;

• Just a quick point that might stop some frustration.

  The API docs are wrong, in that autoreverse, should be autoReverse (capital R).

• Try this code. It has smooth image spinning in 3 degree animations.

  http://developer.appcelerator.com/question/58211/spinning-images-and-dragdrop

• I've been having the same issue. Stumbled on an example that worked here

• Simple! just animate an object inside another one.

  Each with a 180 degrees… worked for me :)