addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwchatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrosseditemptyheartexportfacebookfolderfullheartglobegmailgoogleimageimagesinstagramlinklocation-pinmagnifying-glassmailminusmoremuplabelShape 3 + Rectangle 1outlookpersonplusprice-ribbonImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruseryahoo

Prototype Animation | Design

Let's learn to make app animations in half an hour. 

What we'll build

The GIF above shows the "feed scroll" effect you'll be creating. Notice how the header hides both on scroll and after a specific duration. Finally, notice how the composition knows when to stop scrolling and produce a "rubber band" effect.

The "long press" interaction is going to be used in the context of our fake app as something you'd do to save a photo. This interaction will work on any photo in the app's stream.

--

One day we'll be able to build an iWatch app in Xcode, but until the SDK is available, we'll learn how to prototype apps using the Origami toolset for Quartz Composer.

The Tools

For good reason, Quartz Composer and Facebook's Origami have been garnering a lot of attention lately. Together, they've made possible some innovative user interfaces, including Facebook Paper.

iWatch is a good platform to put these new tools through their paces and create a small app to get feedback on. 

Come Prepared 

There are three key things you'll need before Thursday evening.

1. Register as an Apple Developer (if you haven't already) 
2. Download and install Quartz Composer 
3. Download and install Origami (req. Mac OS X 10.8 or higher)

Once you have those installed, see you Thursday!

Extra credit: We have some great preparation in the notes from our previous Animation event a few weeks back. We'll be going over new animations in this event, but don't worry if you missed the last one. You'll be able to pick it up just fine.

What if I can't attend in person?

No worries. We'll post the code, slides, and video to our group website. happy.watch →

About this event's speaker

Ben Morrow is an experience engineer who builds web and mobile apps. benmorrow.info →

About our group

Let's get together and learn how to develop for iWatch. Events are hosted in the San Francisco Bay Area and Silicon Valley. Speakers present in a "live code" style. 

Apple's "iWatch" is projected to arrive in October. Expect a slim-profile watch running iOS that integrates with iPhones and iPads. The watch will have biometric sensors that integrate with a new Health app. There will undoubtably be new types of apps for the platform that haven't been invented yet. 

Part of the goal is to connect people together so they can work on projects. 

Join or login to comment.

27 went

Our Sponsors

  • http://happy.watch

    Our tutorials, notes, slides, and video from previous events.

  • Become a sponsor

    Building a team? Get your name in front of designers and developers.

  • Become a speaker

    Give back by teaching about design, dev, or business for Apple Watch.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy