Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17630] Animation based on opacity does not work properly for TabGroup

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionInvalid
Resolution Date2014-11-17T23:41:55.000+0000
Affected Version/sRelease 3.3.0
Fix Version/sn/a
ComponentsiOS
LabelsTCSupport, defect, ios, parity
ReporterDavid He
AssigneeIngo Muschenetz
Created2014-08-22T01:31:00.000+0000
Updated2017-03-21T19:11:49.000+0000

Description

Opacity is an undocumented feature in tabgroup. However, setting it to either 1 or 0 when creating tabgroup does make difference - make tabgroup either visible or invisible. When trying to animate the closing and opening of tabgroup, only fade-out effect which sets opacity value from 1 to 0 within the specified duration time. Fade-in effect which works the other way around does not work at all. I think it is a parity issue? See the code snippet below
var global = {};

var baseWin = Ti.UI.createWindow({
	title : "Main Window",
	backgroundColor : "green"
});

var button = Ti.UI.createButton({
	title : "Open TabGroup"
});

button.addEventListener("click", function() {
	global.tbg = buildTabGroup();

	fadeOut(baseWin, 2000, function() {
		showTbgWithoutAnimation(); // this works 
                // showTbgWithAnimation(); this does not work.
	});

});
baseWin.add(button);

function showTbgWithoutAnimation() {
	global.tbg.open();
}

function showTbgWithAnimation() {
	fadeIn(global.tbg, 2000, function() {
		global.tbg.open();
	});
}

function buildTabGroup() {
	var self = Ti.UI.createTabGroup({
		backgroundColor : "green",
		opacity : 1
	});
	var win1 = Ti.UI.createWindow(), win2 = Ti.UI.createWindow();
	var btn1 = Ti.UI.createButton({
		title : "close tbg"
	});

	btn1.addEventListener("click", function(e) {
		fadeOut(global.tbg, 2000, function() {
			global.tbg.close();
			fadeIn(baseWin, 2000, function() {
			});
		});
	});

	var tab1 = Ti.UI.createTab({
		title : L('home'),
		icon : '/images/KS_nav_ui.png',
		window : win1
	});
	win1.containingTab = tab1;
	var tab2 = Ti.UI.createTab({
		title : L('settings'),
		icon : '/images/KS_nav_views.png',
		window : win2
	});

	win1.add(btn1);
	win2.containingTab = tab2;
	self.addTab(tab1);
	self.addTab(tab2);

	return self;
}

function fadeIn(to, duration, finishCallback) {
	to.animate({
		opacity : 1,
		duration : duration
	}, finishCallback);
}

function fadeOut(to, duration, finishCallback) {
	to.animate({
		opacity : 0,
		duration : duration
	}, finishCallback);
}

baseWin.open();

Note : To see the bug, comment in showTbgWithAnimation(); and set opacity of tabgroup to 0

Comments

  1. David He 2014-10-17

    The problem is animation will not work on window and tabgroup before they are opened. Not sure if this is a bug or not.
  2. David He 2014-11-17

    I reckon that behavior is correct. Please close this ticket Thanks
  3. Ingo Muschenetz 2014-11-17

    Closing as invalid based on commenter's feedback.
  4. Lee Morris 2017-03-21

    Closing ticket as invalid.

JSON Source