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. [...]
Interesting observation! Would it be too much to ask for a small flash video with the animation you analyzed? Preferably with two or three repetitions (and extra brownie points for a slow motion one).
This is the only blog post I have seen, since installing Readability last year or maybe even the year before, which would have been ruined by using Readability on it. Not kidding!
Also, the infographic (the animation plus lines tracing its movement) is the subtlest, most tasteful infographic I’ve ever seen. It doesn’t even say “look at me I’m an infographic!” It just gives you the info and scurries offstage in perfect silence, as if the designer was invisible and the only thing that mattered was the communication itself.
Kudos.
How did you create the screen captures of the transition?
Man, should someone should replicate this in HTML5.
As nice as iPhone’s animated flourishes are, Apple must leapfrog Microsoft’s fresh new work in Windows Phone 7 if they don’t want the iPhone to feel dated very soon.
There is a funky transition if you open a folder on the homescreen, then double-tap the home button
The back button does not move so as not to overlay the fading title
Could you possibly post a side-by-side comparison of the two videos?
You’re right, that’s not the ‘official’ back button. Do it again with the actual back button there.
In awe of the dearth of Android retorts.
I’m immediately reminded of the Apple cursor that will accelerate versus moving at a constant rate (e.g. Windows). In other words, it moves faster if you quickly move it, but moves slowly if you’re moving the mouse slowly. This is beneficial as in instances where you’re trying to position the cursor precisely. You can cover a large distance, then move precisely even when your mousing surface is tiny.
Hi
I think the idea behind the navbar animation is to keep continuity between the title of the first screen and the back button on the second screen, because they actually represent the same thing.
As Mikkel points out this is even more true for a standard back button, because it slides above the disappearing title while fading in, resulting in a crossfade effect.
This should probably work for a custom button if you used the backButtonItem property of the first controller instead of using the leftButtonItem of the second one. (Never tought of that before, but that would make sense)
The Back button doesn’t move because it’s supposed to look like the title of the previous pane “Bunnahabhain” has slid over and shrunk into a back button with the same label.
Except you replaced the label with an arrow and destroyed some of the metaphor.
Well it’s pretty much animation 101 – I’d expect nothing less from Apple. This is how Disney animated its characters for a long time. Of course this kind of attention to detail is why Apple is so good at doing what they do. Who, other than Apple, would ever think of something like this. Android and Windows Phone will clone it, of course, but would they have thought of it in the first place? I doubt it.
@Bob
You’re kidding, right? You’re talking about the same folks who can’t figure out how and when to transition from portrait to landscape.
I just recently tried facetime for OSX, and I had this feeling when sliding into a new panel. Then a few days later, I found this article explaining everything.
J dub, it’s simply not true. You can take a look at Windows acceleration curve here: http://www.microsoft.com/whdc/archive/pointer-bal.mspx
To many people (me included) it feels much better than unpredictable and jerky acceleration behavior on Mac.
Both the article and the comments are very misleading.
Windows has had a predictable acceleration mechanism for the mouse cursor since its early days. People, please don’t talk about things you don’t know.
As for the comment in the article, “everything below the navigation bar, animates in with an ease-in-ease-out slide (orange line) rather than a simple linear slide”: it looks very linear to me. Animation in professional software is not done with a constant difference from frame-to-frame, like amateurs will tend to do. The animation will always finish on time (regardless of how long each frame took to render). A linear function is evaluated at the instant each frame is rendered. And this explains the apparent non-linear behavior you see here. It also explains why older iPhones have choppier animations, not animations that take longer.
In other words: if you don’t know what you are talking about, don’t talk about it.
An example of how a simple slide to the left or right can be found on the mobile New Yorker website while on an iOS device.
All I can say is that it look boring and uninteresting.
I just noticed that the Apple Store app doesn’t follow this. Instead it does the animation that you described as the Keynote style animation, where the title bar, back button, and the page content all move in together from the right. Now I’m going to notice this every time I use the app and cringe…
Alisey: I can imagine how one might like the acceleration curve of one system over the other, but “unpredictable and jerky”? Unless you’ve installed a special mouse driver with a random() call in it, I’m not sure how the Mac’s mouse acceleration is “unpredictable”.