[TIMOB-14299] Android does not respect opacity: 0 / opacity: 1 property

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Reopened
Resolution	Unresolved
Affected Version/s	Release 3.1.1
Fix Version/s	n/a
Components	Android
Labels	n/a
Reporter	Itay Avtalyon
Assignee	Unknown
Created	2013-05-17T17:00:31.000+0000
Updated	2018-02-28T20:04:04.000+0000

Description

On Android device, views with Opacity: 0 are shown and views that had an animation turn their opacity to 1, do not become visible again when setting their opacity to 1. They do become visible again if another animation changes their opacity to the desired value. To sum it up: Animation works both ways. Setting view's opacity to 0 on creation, doesn't work. Setting later a view's opacity to 1 (myView.opacity = 1) doesn't work either. *Test case*

var images = ['http://d24w6bsrhbeh9d.cloudfront.net/photo/aX0D7y2_460s.jpg', 'http://d24w6bsrhbeh9d.cloudfront.net/photo/aWQKoNx_460s.jpg', 'http://d24w6bsrhbeh9d.cloudfront.net/photo/aARWQAR_460s.jpg'];

var densityFactor = Ti.Platform.displayCaps.logicalDensityFactor || 1;
var width = Ti.Platform.displayCaps.platformWidth / densityFactor;
var height = Ti.Platform.displayCaps.platformHeight / densityFactor;

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

var topZ = 15;
var middleZ = 10;
var bottomZ = 1;

var imageObjs = [];
for (var i = 0, j = images.length; i < j; i++) {
	imageObjs.push(Ti.UI.createImageView({
		height : height + 'dp',
		width : width + 'dp',
		zIndex : i === 0 ? topZ : i === 1 ? middleZ : bottomZ,
		image : images[i],
		top : 0,
		left : 0,
		opacity : 1
	}));
	if (height === 568) {
		Ti.API.info('iPhone 5');
		imageObjs[imageObjs.length - 1].image = images[i].split('.png').join('-568h.png');
	}
	win.add(imageObjs[imageObjs.length - 1]);
}

var photoIndex = 0;
var rotate = function() {
	imageObjs[photoIndex].zIndex = topZ;
	if (photoIndex < imageObjs.length - 1) {
		imageObjs[photoIndex + 1].zIndex = middleZ;
	} else {
		imageObjs[0].zIndex = middleZ;
	}
	imageObjs[photoIndex].animate({
		left : (-1 * width) + 'dp',
		opacity : 0,
		duration : 2500,
	}, function() {
		imageObjs[photoIndex].zIndex = bottomZ;
		imageObjs[photoIndex].left = 0;
		imageObjs[photoIndex].opacity = 1;
		/*imageObjs[photoIndex].animate({
		 duration: 50,
		 opacity: 1
		 });*/
		photoIndex++;
		if (photoIndex === imageObjs.length) {
			photoIndex = 0;
		}
	});
};
var timer = setInterval(rotate, 5000); 

win.open();

Comments

Daniel Sefton 2013-05-17

Hi Itay, Please provide a reproducible test case that we can drop into an app.js and run. Thanks!
Itay Avtalyon 2013-05-17

Hi, Here is a simple image rotator. On Android, after it makes the first round, you can see that the images are still invisible. Uncommenting the second animation bit will make the images visible again. [moved to description]
Daniel Sefton 2013-06-19

Tested and confirmed on Samsung Galaxy S2 2.3.6 with Ti SDK 3.1.1.

JSON Source