A closer look at iPhone transition animations
iPhone transition animations are cooler than meets the eye.
Take page transitions, for example. It’s common to navigate from one page to another by tapping an item from a list to see more detail: new pages slide in from the right, while tapping Back slides the old page back in from the left.
You might think that animating in a new page to replace the old would simply slide the two in lock-step, like two cafeteria trays on a serving rail, but it’s more subtle than that. To see that subtlety, let’s slow things down for a closer look.
The pages featured here are from Malt Whisky, my new iPhone app, but the animations are the same throughout iPhone. In this example, we’re transitioning from the Bunnahabhain Distillery page to the pronunciation page to hear boo·na·HAA·ven pronounced.
These 13 frames shown at right (links to larger version) reveal five different animations for five different page elements:
• The Bunnahabhain page title slides off to the left (red line) while fading to transparency, mostly in sync with the Distilleries button, but notice how in frame 7 it begins to lag behind the button until by frame 11, when both finally fade completely, the distance between the two has almost doubled.
• The Pronunciation Arrow button, the Back button that when tapped will return you to the Distilleries page, simply fades into view in place. Unlike the other elements, it doesn’t move at all.
• The Pronunciation page title slides in from the right (yellow line) while fading from transparent to opaque. Notice how quickly it slides in initially, then how quickly it slows.
• Finally, the page content, everything below the navigation bar, animates in with an ease-in-ease-out slide (orange line) rather than a simple linear slide.
Interested, I rigged up a similar page transition but with a single animation of “new page pushing out old page”, including the navigation bar. The difference was profound: instead of something that felt alive and vibrant, it felt like a Keynote slide transition. A completely different feeling.
The different timing of all five animations coordinate to make the page transition whoosh. You can barely notice the animations individually and as for perceiving them all in combination, forget it. But you’re not supposed to notice them. You’re simply supposed to get a tiny thrill of seeing one page whoosh in to replace the other, of using a device that somehow seems alive.
And you do.
You should look at how the Stanza ebook reader tracks page transitions.
When first released, you’d swipe the page from right to left, complete the gesture… and then the new page would slide into view. But in the latest version the new page tracks with your finger, starting to slide into view almost as soon as you begin the gesture.
The first way feels like, “Okay, you want to turn the page. Fine. I’ll get to it in a second.”
The new way, in turn, feels much more natural. You push something with your finger and it moves, just like in the physical world.
The back button doesn’t move because it’s not actually a part of Apple’s UI. Take a look at the interface in the settings application.
[...] A böngészés jobb mint más oprendszereken, de messze van kezelhetőségben – sebességben az iPhonetól. Az animációk, gui elemek vegyes minőségűek, láttam már jót is Viszont még igen messze vannak ETTŐL a szinttől. [...]