Animation 在钛中设置两个视图的动画

我有两个视图显示在一个窗口中，如下所示

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

我想制作如下动画：

单击按钮时，topView增加到100%，而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;
}

---

这是不规则的，不漂亮，因此我正在寻找一个更干净，更平滑的方式来做它。谢谢。

我建议您只设置一个视图的动画，以获得好看的动画

可以为俯视图设置更高的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;
}

---

我想知道+在这里做什么“if（expandFlag）{+”这似乎不是一个语法错误，但似乎也没有任何区别？此外，展开是平滑的，但折叠视图不是动画，尽管+是一个输入错误。它什么都不做。关于视图在没有动画的情况下折叠，我不知道会是什么…我猜您将if/else部分放入了eventlistener中，不是吗？当然，否则您将无法控制何时展开和折叠俯视图。无论如何，我不明白为什么折叠没有设置动画