[TIMOB-7412] Android: V8/Rhino: Animation: Setting animation on a lightweight window makes the window color go transparent

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-03-11T22:31:45.000+0000
Affected Version/s	Release 1.8.0.1, Release 1.8.1
Fix Version/s	Sprint 2012-04, Release 2.0.0
Components	Android
Labels	module_animation, parity, qe-and012312, qe-testadded
Reporter	Natalie Huynh
Assignee	Ping Wang
Created	2012-01-25T16:22:38.000+0000
Updated	2012-06-06T21:56:08.000+0000

Description

Steps To Reproduce: 1. Run the attached code:

 
Ti.UI.setBackgroundColor('white');

var win = Ti.UI.createWindow({
	backgroundColor: 'black'
});

var fromColor = '#2d6e32';
var toColor = '#35883b';

var v = Ti.UI.createView({
	width: '100dp',
	height: '100dp',
	backgroundColor: fromColor
});

var b = Ti.UI.createButton({
	title: 'Animate',
	bottom: '10dp',
	left: '10dp'
});

b.addEventListener('click', function() {
	v.animate({
		backgroundColor: toColor,
		duration: 500
	});
});

var b1 = Ti.UI.createButton({
	title: 'Reset',
	bottom: '10dp',
	right: '10dp'	
});

b1.addEventListener('click', function() {
	v.backgroundColor = toColor;
	v.backgroundColor = fromColor;
});

var v1 = Ti.UI.createView({
	width : '50dp',
	height: '50dp',
	backgroundColor: 'white'
});

win.add(v);
win.add(b);
win.add(b1);
win.add(v1);

win.open();

2. Click Animate Actual Result: The window background color became transparent Expected Result: The window background color should stay black Note: Existed in 1.8.0.1 and works in 1.7.5

Comments

Ping Wang 2012-02-10

This issue is not about LW window. Any view with animation attached becomes transparent after animating. Sample code:

   var win = Ti.UI.createWindow({
   	//fullscreen: true, // No matter LW or HW window
   	backgroundColor: 'blue'
   });
   
   var bkgdView = Ti.UI.createView({
   	width: '200dp',
   	height: '200dp',
   	backgroundColor: 'white'
   });
   win.add(bkgdView);
   
   var fromColor = 'green';
   var toColor = 'red';
   
   var v = Ti.UI.createView({
   	width: '100dp',
   	height: '100dp',
   	backgroundColor: fromColor
   });
   
   var b = Ti.UI.createButton({
   	title: 'Animate',
   	bottom: '10dp',
   	left: '10dp'
   });
   
   b.addEventListener('click', function() {
   	v.animate({
   		backgroundColor: toColor,
   		duration: 500
   	});
   });
   
   bkgdView.add(v);
   win.add(b);
   
   win.open();

Ping Wang 2012-02-16

Testing code:

   var win = Ti.UI.createWindow({
   	//fullscreen: true,  // Should work for both LW and HW window
   	backgroundColor: 'blue'
   });
   
   var bkgdView = Ti.UI.createView({
   	width: '200dp',
   	height: '200dp',
   	backgroundColor: 'white'
   });
   
   var fromColor = 'green';
   var toColor = 'red';
   
   var v = Ti.UI.createView({
   	width: '100dp',
   	height: '100dp',
   	backgroundColor: fromColor
   });
   
   v.addEventListener('click', function() {
   	v.animate({
   		backgroundColor: toColor,
   		duration: 500
   	});
   });
   
   bkgdView.add(v);
   win.add(bkgdView);
   win.open();

Testing steps: 1. Run the above testing code on 2.x devices. 2. Click the green view. Expected result: The green view should animate from green to red. During the animation and at the end of the animation, the background (white) view should remain white. Some research notes: 1. The issue that background view becomes transparent after the animation only happens on 2.x devices. 2. If running this testing code using HW window on 3.x devices, the background view will not show up at the first time rendering (TIMOB-7685).

Natalie Huynh 2012-03-07

Tested with 2.0.0.v20120307090205 with Nexus S 2.3.6

JSON Source