Physics-Based Interfaces with UIKit Dynamics

Transcript

1. Physics-Based Interfaces with UIKit Dynamics Adam May @yammada ! Sam

   Kirchmeier @skirchmeier
2. None
3. None

4. Agenda

5. Introduction ! ! !

6. Introduction Examples ! !

7. Introduction Examples Deconstruction !

8. Introduction Examples Deconstruction Collection Views

9. ! Examples Deconstruction Collection Views Limitations & Gotchas Introduction

10. Introduction

11. Introduced with iOS 7 Not a separate framework – built

    into UIKit Can be anywhere you're using UIKit

12. Another tool in your tool belt

13. Physics-Based Interfaces

14. Classical Mechanics

15. Classical mechanics is concerned with the set of physical laws

    describing the motion of bodies under the action of a system of forces.

16. 2014

17. 2014 2007

18. None
19. None
20. None
21. None

22. 2014 2007

23. 2014 2007 1972

24. None

25. Pong: the original physics-based interface.

26. More Recent Examples

27. None
28. None
29. None
30. None
31. None
32. None
33. None
34. None
35. None
36. None
37. None
38. None

39. UIKit Dynamics

40. Natural, real-world interactions Without very much code Beautiful API Fun

    Knowledge of physics not required

41. UIView

42. UIView UIDynamicAnimator Reference View

43. UIView UIDynamicAnimator Reference View UIGravityBehavior

44. UIView UIDynamicAnimator Reference View UIGravityBehavior UICollisionBehavior

45. None

46. UIDynamicItem Protocol !

47. UIDynamicItem Protocol UIView UICollectionViewLayoutAttributes

48. UIDynamicBehaviors

49. UIDynamicBehavior Base Class

50. UICollisionBehavior UIGravityBehavior ! ! !

51. UICollisionBehavior UIGravityBehavior UIAttachmentBehavior UIDynamicItemBehavior UIPushBehavior UISnapBehavior

52. Demo

53. Deconstruction

54. None
55. None

56. UICollisionBehavior UIGravityBehavior UIAttachmentBehavior UIDynamicItemBehavior UIPushBehavior UISnapBehavior

57. 1. Create a UIDynamicAnimator. 2. Recognize a touch, and add

    an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.

58. 1. Create a UIDynamicAnimator. 2. Recognize a touch, and add

    an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.

59. 1. Create a UIDynamicAnimator. 2. Recognize a touch, and add

    an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.

60. 1. Create a UIDynamicAnimator. 2. Recognize a touch, and add

    an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.

61. Demo

62. Collection Views

63. Gotchas

64. Only 2D Hard to visualize Weird units Everything’s a square

    Not perfect for games

65. Recap

66. Introduced UIKit Dynamics PhotoFling Demo TweetBattle Demo Limitations & Gotchas

67. Thanks!

68. Discussion https://github.com/livefront/dynamics Adam May @yammada ! Sam Kirchmeier @skirchmeier