0

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

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

这是不规则且不美观的，因此我正在寻找一种更清洁、更顺畅的方式来完成它。谢谢。

4

1 回答 1

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;
}
于 2013-10-07T18:07:38.870 回答