鈦動畫兩種觀點

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