animating two views in titanium - animation

Question

I have two views displayed in a window as follows
var topView = Ti.UI.createView({
top: 0,
height: '65%',
orientation: 'vertical'
});
var botView = Ti.UI.createView({
bottom: 0,
height: '35%',
layout: 'vertical'
});
i want to animate as follows:
when a button is clicked, topView increases to hundred percent while botView decreases to 0 percent. and the reverse happens when the button is clicked.
But i haven't found a way to do it for two views.
I hope someone can help out.
Thanks -:)
EDIT:
This is what i have done so far:
var expandFlag = false;
/* create animations */
var expandAnim_map = Ti.UI.createAnimation({
height : '100%',
duration: 300
});
var expandAnim_con = Ti.UI.createAnimation({
height: '0%',
duration : 300,
bottom:0
});
var collapseAnim_map = Ti.UI.createAnimation({
height: '65%',
duration: 300,
});
var collapseAnim_con = Ti.UI.createAnimation({
height: '35%',
duration: 300,
bottom:0
});
/* create animations */
if (expandFlag) {
botView.animate(collapseAnim_con);
topView.animate(collapseAnim_map);
expandFlag = false;
} else {
topView.animate(expandAnim_map);
botView.animate(expandAnim_con);
expandFlag = true;
}
This is irregular and not beautiful, hence i'm looking for a cleaner and smoother way to do it. Thanks.

Answer 1

I suggest that you animate only one view in order to get a good looking animation.
You can set a higher zIndex for the top view, and then expand and reduce only that view.
var expandFlag = false;
var topView = Ti.UI.createView({
top: 0,
zIndex: 2,
height: '65%',
orientation: 'vertical'
});
var botView = Ti.UI.createView({
bottom: 0,
zIndex: 1,
height: '35%',
layout: 'vertical'
});
/* create animations */
var expandAnim_map = Ti.UI.createAnimation({
height : '100%',
duration: 300
});
var collapseAnim_map = Ti.UI.createAnimation({
height: '65%',
duration: 300,
});
/* create animations */
if (expandFlag) {+
topView.animate(collapseAnim_map);
expandFlag = false;
} else {
topView.animate(expandAnim_map);
expandFlag = true;
}