[TIMOB-16193] Android: Animation - not possible to rotate and resize an object simultaneously

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Open
Resolution	Unresolved
Affected Version/s	Release 3.2.0
Fix Version/s	n/a
Components	Android
Labels	android, animation, rotate, transform
Reporter	Martin Tietz
Assignee	Unknown
Created	2014-01-14T13:40:13.000+0000
Updated	2018-02-28T20:03:21.000+0000

Description

h2. Problem On Android rotating and resizing an object with one animation is not possible, only one effect at a single time seems to be allowed (rotating OR resizing, not both of them). Up until version 3.2.0 I used a module (https://github.com/billdawson/ti-android-animation) that is now integrated right into the Titanium SDK and therefore can't be included any more (see: http://developer.appcelerator.com/question/160709/studio-320-with-billdawson-animation-module). Nevertheless, the desired animation is not possible. It works on iOS though.

Test case

var win = Ti.UI.createWindow();
var view = Ti.UI.createView({
	backgroundColor: 'red',
	width: 100,
	height: 100
});
view.addEventListener('click', doAnimation);
win.add(view);
win.open();

function doAnimation() {
	var _2DMatrix = Ti.UI.create2DMatrix();

	var animation = Ti.UI.createAnimation({
		transform: _2DMatrix.rotate(100),
		duration: 2000,
		width: 300,
		height: 300
	});

	view.animate(animation);
}

Comments

Ritu Agrawal 2014-01-15

You should be able to achieve the same behavior using scale function. Can you please try out the following code?

   var win = Ti.UI.createWindow({
       backgroundColor:'green'
   });
    
   var box = Ti.UI.createView({
               backgroundColor : 'red',
               height : '100',
               width : '100'
           });
    
           box.addEventListener('click', function() {
               var matrix = Ti.UI.create2DMatrix();
               matrix = matrix.scale(2, 2);
                           matrix = matrix.rotate(90);
                
               var a = Ti.UI.createAnimation({
                   transform : matrix,
                   duration : 2000,
                   autoreverse : true,
                   repeat : 3
               });
               box.animate(a);
           });
           win.add(box);
   win.open();

Ritu Agrawal 2014-01-15

Moving this ticket to engineering as I can reproduce the reported issue on Android but not on iOS. Note that there is a work around by using the scale method but the reporter's code should work with both iOS and Android.
Martin Tietz 2014-01-15

I can confirm that the scale function is a valid workaround for this issue.
jithinpv 2014-09-10

Issue reproduces in Android, works fine in iOS Titanium SDK version 3.4.0 master, 3.2.0.GA Titanium Studio, build: 3.3.0.201407100905 Titanium Command-Line Interface CLI version 3.3.0, Android device : Motorola Moto G, Android version : 4.4.4 iOS simulator : iPhone Retina (3.5-inch), iOS 7.0.3

JSON Source