Bug with flip animation using Titanium Alloy

Question

I'm using Titanium Alloy to build an iOS app. I've run into a particularly frustrating issue that I've been stuck on for quite a bit now.

Once the user logs in, my goal is to have the login window animate (flip) to the dashboard window. This works well, except for this one bug. The Login navigation top bar seems to show for a second before the Player dashboard bar jumps downward to the right spot.

It looks like this until the flip animation is completed: It looks like this until the animation completes.

Upon completion of the animation it jumps to this: After animation completed

The dashboard page is a TabGroup, akin to this, and the initial tab has the title "Player":

<TabGroup>
    <Tab icon="player_icon.png">
        <Window id="playerTab" title="Player"/>
    </Tab>
</TabGroup>

The login controller is a NavigationWindow with a Login window and a Registration window.

On the successful submission of the login form, I create the index controller (the dashboard):

Alloy.createController('index', { animate: true, loginSuccess: true });

Which has the initialization code shown here:

if (!AppData.isLoggedIn() && !args['loginSuccess']) {
    // Splash contains the register/login forms
    Alloy.createController('splash');
} else {
    // Check if the user is logging in or resuming previous state
    if(args['animate']) {
        $.index.open({ transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT });
    } else {
        $.index.open();
    }
}

Does anyone have any idea why this bug might be occurring? I appreciate any help!

Thanks!

Mike L. Mike L. · Accepted Answer · 2015-01-03T21:32:44

Figured it out! Turns out the flip animation wasn't accounting for the status bar height until the animation was finished, so I set an initial top margin of 20 for the TabGroup and removed the margin after the animation completed.

Works great now!

Bug with flip animation using Titanium Alloy

1 Answers