Project: titanium
Issue TIMOB-17260: Android: Animation is broken if you don't stringify the affected view
h4. Problem Description Three (red, blue, green) square views should move from top of the screen ([ 0,50], [0,80], [0,random]) to the same target position [300, 300] (grey square). They **only** move as expected after you add a stringify the view. See the video attached. I managed to recreate the issue on the GT-S7562 device as well. h4. Steps to reproduce 1. Create a new mobile project (classic titanium) 2. Add this code to app.js {code} var win = Ti.UI.createWindow({ backgroundColor:'white', }); var viewo = Ti.UI.createView({ backgroundColor:'#888', top:300, left:300, width:100, height:100, }); win.add(viewo); function createView(color, id){ return Ti.UI.createView({ backgroundColor: color, width: 100, height: 100, opacity: 0.5, id: id }); } var view1 = createView('green', '1'); var view2 = createView('blue', '2'); var view3 = createView('red', '3'); var animation1 = Ti.UI.createAnimation(); var animation2 = Ti.UI.createAnimation(); var animation3 = Ti.UI.createAnimation(); animation1.addEventListener('complete', function() { //Ti.API.info('animation1 complete. view: ' + JSON.stringify(view1)); startAll(); }); animation2.addEventListener('complete', function() { //Ti.API.info('animation2 complete. view: ' + JSON.stringify(view2)); }); animation3.addEventListener('complete', function() { //Ti.API.info('animation3 complete. view: ' + JSON.stringify(view3)); }); function initAnimation(animation){ animation.left = 300; animation.top = 300; animation.duration = 5000; } function startAnimation(x, view, animation){ view.setLeft(x); view.setTop(0); initAnimation(animation); JSON.stringify(view); // Comment out this line in order to see the bug in your emulator. view.animate(animation); } function startAnimation1(){ var startX = 50; startAnimation(startX, view1, animation1); } var startX = 50; function startAnimation2(){ startX += 30; startAnimation(startX, view2, animation2); } function startAnimation3(){ var startX = Math.floor(Math.random() * 500); startAnimation(startX, view3, animation3); } function startAll(){ setTimeout(function(){ startAnimation1(); startAnimation2(); startAnimation3(); }, 3000); } win.add(view1); win.add(view2); win.add(view3); win.open(); startAll(); {code} 3. Comment out the line with the comment "Comment out this line in order to see the bug in your emulator.". 4. Run it in emulator to see the issue (the animation breaks down when you comment out the line in step 3 - if you add it again, it will work as expected). h4. Extra info Please check the video for more information.
Story points: 5