It should just, boom, rotate, and make a swooosh-like turn at 90 degrees and then bam, bounce a like jelly in outer space, but more whop-whop-bang in a microwave. Right?
Getting to know the feature
Product design is really just a race to getting to know the product. It’s about balancing interpretations and knowledge gaps as smoothly as possible, but really, we’re just guessing until we are able to fill the gaps with animations, prototypes and eventually the final product.
Embraced by Apple and Facebook, QC seemed like a good idea to try out. It’s fun to work with, but it turned out to take up a significant amount of time – 3 times more than After Effects, from my experience. Also, it can seem a bit confusing to some people:
(slide from a QC talk at Evernote)
When I decided to check After Effects out, the only tutorials I could find were how to make it look like your car exploded and hatched alien blood. Not plain old interface design. So I decided I’d make one, and I decided that basing it on David’s excellent tutorials for Quartz Composer might be able to help you compare the two options.
What we’ll build
This is the final animation as it will look (before we add it to the skyscraper)
Part 1: Basic animation
Using just this you’ll be able to do 80% of anything you would ever want to do. Not bad for 3 minutes.
Part 2 and 3: Don’t repeat yourself
This gets a bit hairy, but hang in there, this can save you hours.
Part 4: Anchorpoints
Easy one. Learn how to make it look like the speech bubble comes out of that guy’s mouth.
Part 5: Modal dialog
Bounce animate a big modal dialog and make the rest of the interface darker.
Part 6: Exporting the video file and creating an animated GIF
The secret sauce. Paste the GIF into G+, emails or presentations and your audience will know exactly what you mean.
Part 7: Motion tracking onto a real skyscraper
It could be any object, really. Like a mobile phone if you’re into those.