Building Fun and Touchable Interfaces

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.

03000552bf9d93212d84e024f8daf275?s=128

Nathan Eror

November 08, 2010
Tweet

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

  7. None
  8. None
  9. None
  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