3D Animation Sandbox

The sample application to accompany my conference talk for Renaissance, the iOS app makers' conference, Animating Your App To Life.

Slides can be downloaded from here.

This application was also distributed as part of the following conference talks:

• Animation: From 0 to Awesome in 90 minutes (CocoaConf San Jose 2013, slides)
• Animating Responsibly (360iDev 2013, slides, screencast)

##Requirements

• Xcode 4.5.2
• iOS 6+
• ARC

##Licensing The BSD 3-Clause License

##Summary This app is designed to let you experiment with 3 different animations. The app is full-screen and gesture driven with no visible chrome so that you can focus on the animations with out any other visual distractions.

• Use a 2-finger swipe to switch between the 3 animations.
• Swipe right along the left edge of the screen to open up a settings panel that will let you adjust various animation factors. For most of the settings items, tap on the row to cycle through different values. Tap outside or swipe to close settings.

##Red Ball A simple animation. Tap on the ball to move it from the left side of the screen to the right. Tap it again to move it back. Via Settings you can also add scaling and opacity animations. #Fold A 3D folding animation. Tap on the center card and it will fold. Or you can pinch it and the folding will follow your pinch. Release your fingers and it will either fall back open or fold shut depending on where it was when your fingers lifted. This animation demonstrates the principle of grouping animations by combining transform animations (the folding panels) with a height animation (keeps the view centered) and opacity animations on a pair of gradient layers (provides the shadows to complete the folding illusion). It also demonstrates implicit animations during the finger tracking of the pinch gesture. Keyframe animations are used to have the height and shadow animations follow sine/cosine curves. #Flip A 3D rigid page flipping animation. Tap on either the left or right edge of the center card to trigger a page flip. Pan from either the left or right edge to have the page track your finger (implicit animations). Release your touch and the page will fall into place. Swiping also triggers page flips. Demonstrates animation grouping (transform on flipping page plus shadows on flipping page and page beneath) and chaining (a complete page flip is 2 sets of animations that are launched sequentially). Keyframe animations are used to have the shadow animations follow sine/cosine curves. #Timing Curve Personally I think this is the coolest feature of the app. It's found in Settings under Timing Curve. Use multi-touch to adjust the 2 control points of the cubic bezier path. The values of the control points are shown at the bottom of the screen (in case you find a curve that you'd like to use in your code). Upon closing settings, the animations will now run with generated timing curve. (The side panel open/close animation also runs with the same curve.) Use the reset button at the top right to switch to any of the 5 preset timing curves. #Other Stuff To Play With

• Anchor Point: see how this affects the flip and fold animations
• Skew: see how this affects the flip and fold animations. Inverse is truly weird!
• Try deconstructing each animation by unchecking components; e.g. try removing shadows from the flip and fold animations

Best,
Mark Pospesel

Website: http://markpospesel.com/
Contact: http://markpospesel.com/about
Twitter: http://twitter.com/mpospese