How to Create "Slide" Animation Without Tabs?

Hello,

In the KitchenSink application, screen transitions use the "slide" effect on both iPhone and Android. This is apparently accomplished using the open method of a tab, like this on line 61 in main_windows/base_ui.js:

Titanium.UI.currentTab.open(win,{animated:true});

Apparently there is an open method on a Tab object that will create the slide transitions between screens.

My questions:

Where is the open method of a Titanium.UI.Tab object documented? I don't see it here: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Tab-object
Where is the currentTab property of Titanium.UI documented? I don't see it here:
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI-module
If I'm not using tabs like KitchenSink does, how do I create the "slide" transition? Does a Titanium.UI.Window have an open method like tab does?

Thank you!!!!

-Ryan

2 Answers

As per the question here checkout NavigationGroup

I'm just looking into it now myself but I think this is what we're looking for.
— answered December 2nd 2010 by Blake E
permalink

2 Comments
- follow-up: I just started with the demo at the bottom of the NavigationGroup page and it worked great for me.
  
  — commented December 2nd 2010 by Blake E
- NavigationGroup is great, bt it's iOS only. If you want the same effects for Android you're going to have to do a lot of work to make that happen.
  
  — commented November 1st 2012 by remko posthuma
1 Vote

You might look into something like this:

    var t = Ti.UI.create2DMatrix().translate(win.width,0);
    win.animate({translate:t,duration:5000,opacity:0.1}, function(){
        win.close();
    });

The transform doesn't work for some reason.. but if you can get the animate to move the left/right side to the opposite that is what you want.

— answered June 11th 2010 by James Armstead
permalink

3 Comments

Opps - just realized you were looking to open it.. haha, the open() seems to think you can pass an animate to it.. so you might be able to pass a similar function to it.

— commented June 11th 2010 by James Armstead
I am also interested in this solution. Any updates?

— commented June 12th 2010 by Antonio Silveira

I don't know but hiding and showing effect is not animating for me.

toggle : function() {
    if(isShow == true) {
        var t = Ti.UI.create2DMatrix().translate(0,Ti.Platform.displayCaps.platformHeight);
            personalizationBase.animate({translate:t,duration:5000}, function(){
                Ti.API.info('Window Closed...');
                personalizationBase.hide();
            });
    } else {
        personalizationBase.show();
        var t = Ti.UI.create2DMatrix().translate(0,0);
            personalizationBase.animate({translate:t,duration:5000}, function(){
                Ti.API.info('Window Opened...');
            });
    }
    isShow = !isShow;
}

— commented June 8th 2012 by Investis App Development

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How to Create "Slide" Animation Without Tabs?

2 Answers