Question

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

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

我想动画如下：

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

在钛中动画两个视图

1 个答案: