钛动画两种观点

Question

我有一个窗口中显示的两个视图如下

var topView = Ti.UI.createView({ 
    top: 0, 
    height: '65%', 
    orientation: 'vertical' 
}); 
var botView = Ti.UI.createView({ 
    bottom: 0, 
    height: '35%', 
    layout: 'vertical' 
}); 

我想动画如下：

一个按钮被按下时，冠捷提高到百分之百，而botView下降到0％。当按钮被点击时发生相反的情况。

但我还没有找到一种方法来做两个视图。 我希望有人能帮忙。 谢谢 - :)

编辑： 这是我迄今所做的：

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; 
} 

这是不规则的，不漂亮，所以我在找一个更清洁，更平滑的方式做到这一点。谢谢。

Answer 1

我建议你动画只有一个视图，以获得一个漂亮的动画。

您可以为顶视图设置更高的zIndex，然后仅展开和减少该视图。

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; 
}