анимация двух видов в титане

У меня есть два представления, отображаемые в окне следующим образом

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

Это неправильно и некрасиво, поэтому я ищу более чистый и плавный способ сделать это. Спасибо.


animation titanium titanium-mobile
person SamAko    schedule 07.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я предлагаю вам анимировать только один вид, чтобы получить красивую анимацию.

Вы можете установить более высокий 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;
}
person stomasso    schedule 07.10.2013
comment
Интересно, что здесь делает + if (expandFlag) {+ Похоже, это не синтаксическая ошибка, но, похоже, это тоже не имеет никакого значения? Кроме того, расширение происходит плавно, но свертывание представления не анимировано. - person SamAko; 08.10.2013
comment
+ была опечатка. Это ничего не делает. Насчет схлопывания представления без анимации, я не знаю, что это может быть... - person stomasso; 08.10.2013
comment
Я предполагаю, что вы поместили часть if/else в прослушиватель событий, не так ли? - person stomasso; 08.10.2013
comment
конечно, иначе вы не сможете контролировать, когда разворачивать и сворачивать topView. В любом случае, я не понимаю, почему коллапс не анимируется. - person stomasso; 08.10.2013