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.:
- rotate by 90 degrees -> make view rotate from 0 to 90 degrees
- 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!
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. -
This post should be helpful as well.
-
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); });