Comments on: A closer look at iPhone transition animations

By: Tim

Tim — Mon, 01 Nov 2010 21:56:59 +0000

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”.

By: Abhimat

Abhimat — Thu, 28 Oct 2010 00:17:33 +0000

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…

By: John

John — Mon, 25 Oct 2010 11:42:05 +0000

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.

By: Fred

Fred — Sun, 24 Oct 2010 21:21:50 +0000

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.

By: Alisey Lebedev

Alisey Lebedev — Sun, 24 Oct 2010 05:14:16 +0000

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.

By: Sin

Sin — Sat, 23 Oct 2010 13:55:42 +0000

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.

By: Steven

Steven — Sat, 23 Oct 2010 02:57:56 +0000

@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.

By: nik

nik — Sat, 23 Oct 2010 00:39:43 +0000

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.

By: Matthew R

Matthew R — Fri, 22 Oct 2010 23:44:09 +0000

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.

By: Implicitlyrics

Implicitlyrics — Fri, 22 Oct 2010 21:21:14 +0000

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)

By: J dub

J dub — Fri, 22 Oct 2010 20:39:55 +0000

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.

By: patrik

patrik — Fri, 22 Oct 2010 20:19:48 +0000

In awe of the dearth of Android retorts.

By: Pim

Pim — Fri, 22 Oct 2010 20:19:23 +0000

You’re right, that’s not the ‘official’ back button. Do it again with the actual back button there.

By: Geoff

Geoff — Fri, 22 Oct 2010 20:08:37 +0000

Could you possibly post a side-by-side comparison of the two videos?

By: charles

charles — Fri, 22 Oct 2010 19:45:50 +0000

The back button does not move so as not to overlay the fading title

By: Kirk

Kirk — Fri, 22 Oct 2010 19:37:55 +0000

There is a funky transition if you open a folder on the homescreen, then double-tap the home button

By: Bob

Bob — Fri, 22 Oct 2010 19:24:50 +0000

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.

By: Max Niederhofer

Max Niederhofer — Fri, 22 Oct 2010 18:26:42 +0000

Man, should someone should replicate this in HTML5.

By: Mark

Mark — Fri, 22 Oct 2010 16:16:08 +0000

How did you create the screen captures of the transition?

By: Giles Bowkett

Giles Bowkett — Fri, 22 Oct 2010 14:23:12 +0000

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.