animation - animating two views in titanium -
i have 2 views displayed in window follows
var topview = ti.ui.createview({ top: 0, height: '65%', orientation: 'vertical' }); var botview = ti.ui.createview({ bottom: 0, height: '35%', layout: 'vertical' }); i want animate follows:
when button clicked, topview increases hundred percent while botview decreases 0 percent. , reverse happens when button clicked.
but haven't found way 2 views. hope can out. -:)
edit: have done far:
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; } this irregular , not beautiful, hence i'm looking cleaner , smoother way it. thanks.
i suggest animate 1 view in order looking animation.
you can set higher zindex top view, , expand , reduce view.
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; }
Comments
Post a Comment