Tutorials

>

COSMOS

>

Radial Menu

Jake’s concept for a persistent menu centered in the app’s main screen is pretty slick, but also pretty damn complex when it comes to the timing and animations needed to bring it to life. We’re going to first break down the problem from a visual / component perspective to see what parts we’ll need. Then, we’ll break down the animations for each component of the opening / closing transitions. Then, we’ll deal with gestures, targets, actions and polishing up the UI with some labels.

Concepts

The concept is simple: a central icon sitting in the middle of the screen transforms to a stylized radial menu with icons for all twelve of the astrological signs. When you choose one of the icons a bright blue highlight fills that portion of the menu. After selecting an icon, the menu transforms back to the central icon. Fairly straightforward.

To build this out we’re going to handle each animation and transition component separately, then integrating them into a final transition.

Rings

The main visual components of the menu are a series of rings. In the closed state we see two rings and some dots, the open state has 7 rings: 1 thick, 5 thin, 1 with alternating dashes. On top of this, there are 11 dividing lines that separate the spaces for each of the icons. Focusing on this section will allow us to determine the basic motion and feel for the menu, from which we will be able to build up the rest of the interaction and finishing touches to make the menu look great.

Icons

The icons are the center point of the entire application, they represent the different positions the background will show. They not only look good, but their animated state bring the menu to life: in the closed state they look like little dots, and in the open state they show their full shape, in between there’s a really nice movement and reveal animation to make them appear.

Selector

When the menu is open and the user selects an icon we want the background of that selection to highlight. There are a couple ways to go about this: we could create 12 shapes and change the fill color, or we could build a masked shape and rotate it. Either way, we will also have to consider how the user is going to trigger the selection via some kind of gesture.

Gesture

Picking the right gesture will make a big impact on the style and feel of our application. We want the interaction to be simple and straightforward, yet we also want the navigation to be something that people haven’t really seen before. We will have to figure out how to balance opening, selecting an icon and closing the menu without putting too many gestures or actions into the process.

UI

To give the menu and the app more context we will add a title label that shows the current selection, an info button for opening the info panel, and an instruction label that appears only one time after the app opens and the user hasn’t played with the menu for a few seconds (e.g. if they don’t know what to do with the menu the message will tell them). Finally, there’s going to be a little shadow that fades in behind the menu when it opens, this shadow will provide contrast that will make the menu pop out visually over the background content. Also, we’ll add a little tick to top things off.

Animations

For all the various states there are the following sequenced animations:

1. All grow from the center outwards, looking like they come “out” of the thick line.
2. The dividing lines animate in at random times.
3. The icons start as points and move outwards to their final position, then the points morph into shapes.
4. The info button reveals itself at the end of the transition.
5. The shadow fades in during the transition.
6. The highlight appears when an icon is being selected.
7. Everything happens in reverse order when a sign or the info button is selected, or when the user chooses to close the menu.

Breakdown

We’re going to break down our work into these steps and deal with interdependencies when we tie everything together:

1. Build the MenuRings class to handle the basic basic shape of the menu
2. Build a MenuIcons class to the animation and presentation of the icons
3. Build a MenuSelector class to handle the gesture, selector, info button and label for the menu
4. Build a MenuShadow class to handle animating the shadow
5. Build a Menu class to pull everything together

Sugar pie.