API Development

How to create an iPad menu with animation

In this tutorial, we’re going to show a technique used by the popular USA Today iPad application. The USA Today application combines the use of a section logo (in the upper left hand) that denotes the appropriate area of the paper you’re currently reading with an animatable menu when touched. This allows you to quickly toggle between various sections of the paper (calling it a paper while it’s now really an application is weird, I suppose).

First off, let’s see a screenshot of what it looks like in the real application and what we’re going to prototype in this tutorial

When you click the left-hand corner logo, the center menu (visible in the image above) will animate from the logo to the center of the screen with the appropriate section logo highlighted.

OK, let’s view a quick view of what we’re going to create in Titanium.

So, how does it work?

We simply create a logo view that holds the area where the section image will go. This is named the logo in our code above.

We then create some filler text in a label and just place it on the screen. For this tutorial, that just makes it a little easier to see (and test) the opacity on the menu.

Next, we create the menu view itself, named menu. Notice that the left and top properties are the same as the logo. We do this so that the initial position of the menu starts from the same location as the logo. We want to animate from the logo to give the appearance that the menu comes out of the image. We also set the initial opacity to 0 (on a scale from 0.0-1.0). This makes the menu initially invisible. You can also just hide it.

We then create 2 views that are siblings on the menu view. We do this since we want to create a transparent layer with 70% opacity. If we added the icons directly to this view as children, they would inherit the opacity of the parent view and the icons would also be 70%. However, we want the icons to be 100% and the background view to have the opacity. So, we make 2 views that are siblings. The first is the 70% transparent layer and the second is the parent of the actual icons on the menu.

We then create a simple array of our sections and loop through and add the icon views to the sectionWrap view. Notice that the sectionWrap uses a horizontal layout. This makes it very easy to add a set of views to a parent in a horizontal fashion without having to provide specific x/y positioning.

In the loop, we need to add a callback that will do the menu selection. We wrap the handler logic in a Javascript closure so we can access the loop variables later.

The callback simply removes the currently selected menu’s background image and changes it to the newly selected menu. It then animates back to the center. Note that we use a delay property in the animate call. This allows us to provide a slight delay before the animation starts. The function passed to animate will be invoked after the animation has completed, in which case, we change the top left section logo to the new section.

The last main part of the logic is simply the menu presentation animation itself. By clicking on the logo we need to toggle the menu’s visibility. We simply keep a boolean to indicate the visibility state and then toggle either hiding or showing.

To animate the menu to visible, we calculate the new left and top position (x and y, respectively), and then animate the menu to this position. Since we initially set the menu to be located at the same position as the logo and the same size, when we animate, it will grow and move from this position to the center. This gives the nice effect of having the menu fly out from the logo. Notice we also change the opacity to 1.0 which will cause the menu to transition from invisible to visible in a nice fade-in effect.

To animate the menu back to invisible, we simply do the opposite.

Now, wasn’t that too easy? With Titanium, there’s no reason you can’t do beautiful, GPU-optimized animations in your applications.