Watching the Apple Watch Keynote, the animation that plays when the watch app opens escaped my notice. It’s the kind of thing that most people won’t see at first, but which they will certainly feel and take in subconsciously. The kind of wow! that Apple does so well. It was only when I went back over they Keynote video, pausing to take in the details, that I noticed how complex and fluid it is.

Apple are so proud of this animation that they show it in various forms more than ten times throughout the keynote. The Jony Ive narrated video has a slowed down version which I’ve slowed even further.

Some things to note:

• The dial animation runs clockwise, of course. The close animation runs in reverse, going anti-clockwise.
• Each watch face has its own animation. This one is the most detailed.
• The watch app is the only one to have a complex open animation. Other apps fade in from the icon. It would be great if there was a dedicated API to create these animations, but it would delay the actual app open time for most apps.
• In the live demo, the animation is finished in around a second. It’s very hard to see the detail in real-time (at least in the Keynote video).
• While the design motif of iPhone is rounded rectangles, the design motif of the watch is circles. The circular icons are arranged in a circular pattern, operated by a circular gesture. The watch app opens with a circular animation.
• Open animations for apps composed of a full-screen light-colored rectangle don’t look as good. The Maps and Photos apps are like that. Apps with a dark background look better, having no edges. This is the trade-off of a circular interface in a rectangular screen.
• In the live demo, a touch on the watch app shows a slightly different open animation. The icon reacts to the touch and shrinks slightly before it expands. This makes it feel like the icon is actually being pressed. Lots of the animations on the watch have that “alive” feeling, using more cartoon-style, dynamic animations than on iPhone. Instead of slowing to a stop (as in iOS’s ease-in ease-out animation) they pass their final destination slightly then snap back. On the iPhone interface it feels like you are interacting with physical inanimate objects; paper, pages, buttons. On the watch it feels like the objects have a life of their own. Like a Tamagochi. This is certainly deliberate.