Apple’s keynote video reveals an exquisite animation introduced to resolve a delicate design problem as you enter the Tracks editor in GarageBand for iPad.

The scene: while recording an instrument and deep in the creative flow, the user taps the Tracks icon to edit the recording.
The problem: how do you get the user from the instrument to the mixer without disturbing that creative flow?
The solution: transition gracefully from instrument to mixer by animating the instrument into the mixer track for that instrument.

Let’s walk though the video to deconstruct the animation in greater detail:

The animation begins in the Smart Instrument view when you choose Tracks (57:09 in the Apple video). You can see the recorded track in green just above the guitar’s wood surface, and chord names (Em, Am…Bb, Bdim) running across the guitar’s sound hole.
Hide the chord names
The first animation phase hides the chord names, which you can see are no longer visible. Why did the designers choose to hide the chord names? Perhaps because rendered text can sometimes look strange during perspective transforms.
Pivot the guitar away
The second animation phase begins pivoting the guitar face up and away. The perspective you see is important, because the guitar face is being pivoted in tandem with the final mixer track representing the guitar, the animation guiding the eye from one to the other seamlessly.
Still in the second animation phase, you see the first hint of the mixer track appearing. That hint of white in the lower-left corner is the guitar icon appearing on the mixer track. You can also see the time marker already horizontally aligned with the time marker in the recorded track above.
Pivot the mixer track into view
Now late in the second animation phase, the guitar face is nearly gone and the mixer track is clearly positioned in 3D at a right angle to the guitar face, as though parallel to the guitar’s side. Hard to describe, but imagine the mixer track taped to the side of the guitar, then turning the guitar onto its back to reveal the mixer track.
When the second animation phase ends, the mixer track has completed replaced the guitar, but the recorded track in green at the top still hasn’t moved. Moving the recorded track onto the mixer track represents the third phase of the animation, which will also unite the two time markers.
Move the recorded track onto the mixer track
The third phase of the animation begins, sliding the recorded track downwards towards the mixer track.
As the recorded track descends it changes color and reveals the individual notes within the recording.
Final animations
The fourth phase animates a number of other elements to their final appearance: the toolbar icon appears, the backgrounds fade into view, and the mixer frame at the far right appears.

Sunday, March 6th, 2011, 1:47 pm    Both comments and pings are currently closed.