Building Fun and Touchable Interfaces

Touch and animation are at the heart and soul of iOS. Good use of both make an app feel natural and organic. Apple has consistently raised the bar for such interfaces as the latest incantations of iMovie and Garage Band show. In this session you will learn how to take full advantage of UIKit, Core Animation and Gesture Recognizers to create stunning and touchable interfaces. This is an advanced, "roll up your sleeves" kind of session with a lot of code. By the time we are finished, you will think differently about how you build your interfaces, and your apps will be better for it.

Transcript

1. CREATING FUN AND TOUCHABLE INTERFACES http://www.freetimestudios.com Nathan Eror - Free Time Studios @neror http://github.com/neror/
2. WHO AM I? •iOS and Mac developer, consultant and speaker •11+ years experience as a developer •Founded Free Time Studios in early 2009 to focus on iOS app and game development •Apple fanboy and graphics programming geek
3. WTF? Practical application of gesture recognizers, UIKit animations, etc.
4. 3 CONCEPTS
5. 3 CONCEPTS • Good animation is not “fire and forget” • You should be using gesture recognizers • The transform property is your friend
6. ANIMATION
10. MULTITOUCH GESTURES
11. Natural Intuitive Easy to Discover
12. VERY HARD TO GET RIGHT
13. VERY HARD TO GET RIGHT • Limited Precision • Simultaneous Input • Inherent Ambiguity • Maintain Consistency Fingers wobble 11 simultaneous on iPad
14. UIGestureRecognizer • Encapsulates event handling • Abstract base class • Added to a view • Continuous or discrete • Can interoperate with standard event handling
15. BUILT-IN GESTURES Tap Pinch Pan Swipe Rotate Long Press
16. DEMO
17. THE TRANSFORM
18. THE TRANSFORM CGAffineTransform.h struct CGAffineTransform { CGFloat a, b, c, d; CGFloat tx, ty; }; • 2D affine transform • Applied to the view’s geometry before rendering • Does not affect the view’s actual geometry
19. THE TRANSFORM • Especially useful for transitions • CGAffineTransformIdentity ~= 1 CGAffineTransform Matrix Operations CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty); CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy); CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle); CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty); CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy); CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle); CGAffineTransform CGAffineTransformInvert(CGAffineTransform t); CGAffineTransform CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2); For a transition, set the view’s geometry to the end state and modify its transform for the begin state. Then animate the transform back to the identity transform.
20. DEMO
21. THANK YOU http://www.freetimestudios.com Nathan Eror @neror neror@freetimestudios.com