Problem
When animating a view on Android through the transform property, the top left of the view is used, unlike on iOS where the center is used. Also, chained animations result in a jerky, unsmooth transition.
Reproduction
On iOS, this results in a blue box shrinking to 20% its size, then growing to 180%, then shrinking smoothly down to 20%, and so on, always centered. On Android, it shrinks to 20%, to the top left corner. Then it jumps to 100% size, and grows to 180%. Then it jumps to 100%, leaving the splash screen image visible through the white window, and shrinks to 20% the size.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var box = Ti.UI.createView({
backgroundColor: 'blue',
width: 100, height: 100
});
win.add(box);
var shrink = Ti.UI.createAnimation({
transform: Ti.UI.create2DMatrix().scale(0.2, 0.2),
duration: 1000
});
function doShrink() {
box.animate(shrink);
}
shrink.addEventListener('complete', doGrow);
var grow = Ti.UI.createAnimation({
transform: Ti.UI.create2DMatrix().scale(1.8, 1.8),
duration: 1000
});
function doGrow() {
box.animate(grow);
}
grow.addEventListener('complete', doShrink);
win.addEventListener('open', doShrink);
win.open();
Testing Notes
* Test on 2.2, 2.3, 3.1 and 4.x. * Run the attached project timob9207big.zip. * Test the "fail" branch (master). * * When you run the "timob-9207" test, you should really see awful behavior in versions < Honeycomb. After a few animations, the background will show through and stick there. Even if you run on Honeycomb, it will be jerky (though at least the background won't suddenly become transparent.) * * When you run the "timob-8958" test, when you touch "Menu" it will rotate, but then pop back. (It's not supposed to pop back.) * * Run "timob-7412" test just to see how it looks. The goal is to make sure the fix branch, which you'll be testing later, doesn't regress timob-7412. * * When you run "timob-9433" test, you'll see very jerky clockwise rotation. It's supposed to be 7 clockwise movements in succession, then 1 that winds back counter-clockwise. Instead you'll see that the 7 clockwise movements keep starting over from the original position, rather than moving in succession. * Test the fix branch (Bill's timob-9207 branch). * * When you run the "timob-9207" branch, any background that shows through should not be sticky. Unfortunately there is still a "flash" onClosing as fixed. Verified with: Titanium Studio, build: 2.1.0.201206221045 Titanium SDK: 2.1.0.v20120622174154 Device: Samsung Galaxy tab (3.2)
Re-opening to edit label