menganimasikan dua tampilan dalam titanium

Saya memiliki dua tampilan yang ditampilkan di jendela sebagai berikut

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

saya ingin menganimasikan sebagai berikut:

ketika tombol diklik, topView meningkat hingga seratus persen sedangkan botView menurun hingga 0 persen. dan sebaliknya terjadi ketika tombol diklik.

Tapi saya belum menemukan cara melakukannya untuk dua tampilan. Saya harap seseorang dapat membantu. Terima kasih -:)

EDIT: Inilah yang telah saya lakukan sejauh ini:

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

Ini tidak teratur dan tidak indah, oleh karena itu saya mencari cara yang lebih bersih dan halus untuk melakukannya. Terima kasih.


animation titanium titanium-mobile
person SamAko    schedule 07.10.2013    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Saya menyarankan agar Anda menganimasikan hanya satu tampilan untuk mendapatkan animasi yang terlihat bagus.

Anda dapat mengatur zIndex yang lebih tinggi untuk tampilan atas, lalu memperluas dan mengurangi hanya tampilan tersebut.

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
Saya ingin tahu apa yang dilakukan + di sini jika (expandFlag) {+ Tampaknya bukan kesalahan sintaksis, tetapi tampaknya juga tidak ada bedanya? Selain itu, perluasannya mulus, tetapi menciutkan tampilannya tidak dianimasikan - person SamAko; 08.10.2013
comment
tanda +nya salah ketik. Itu tidak melakukan apa pun. Tentang tampilan yang runtuh tanpa animasi, saya tidak tahu apa itu... - person stomasso; 08.10.2013
comment
Saya rasa Anda memasukkan bagian if/else ke dalam eventlistener, bukan? - person stomasso; 08.10.2013
comment
tentu saja, jika tidak, Anda tidak akan dapat mengontrol kapan harus memperluas dan menciutkan topView. Bagaimanapun, saya tidak mengerti mengapa keruntuhan tidak terjadi - person stomasso; 08.10.2013