ITT 2017 - Justin Miller - Learning From iOS Animations

The animation foundations in iOS are well-designed, intuitive, and powerful. What can we learn about how they are built, the capabilities that they give, and the assumptions that they are built upon, that we can bring to our own software design? Whether we are building apps or SDKs or doing frontend or backend, good framework and API design is universal. Justin Miller shows us one of the best examples.

Transcript

1. LEARNING FROM IOS ANIMATIONS Justin Miller • Mapbox
2. The animation foundations in iOS are well- designed, intuitive, and powerful. What can we learn about how they are built, the capabilities that they give, and the assumptions that they are built upon, that we can bring to our own software design?
3. PERSONAL INTRO • I’ve been programming for work for 20 years & have been using Apple technologies for 15 of those • Perl, PHP, Objective-C, C, C++, Java, Swift (also Bash) • I’ve been both an app builder and a tool builder • I have always admired Apple's API design
4. MAPBOX INTRO • We’re building developer tools for maps & location • Customized map appearance & function • We recently added “runtime styling” • I have had to think a lot lately about animations
14. WHAT ARE ANIMATIONS?
16. MR. BOJANGLES Bill “Bojangles” Robinson, 1878-1949
17. MR. BOJANGLES • Probably the first programming that I can remember • Intro to animation for the TI-99/4A computer (1979) • Absolute simplest possible animation • Two frames swapped in time, coincident in position
23. ANIMATIONS ARE COMMUNICATION • Hello, friends! • Merhaba, arkadaşlar! • We can tell the user with text • Or we can show the user with animation Row 4 Row 3 Row 2 New Row! Row 5 Row 1
24. ANIMATIONS ARE COMMUNICATION • Hello, friends! • Merhaba, arkadaşlar! • We can tell the user with text • Or we can show the user with animation Row 5 Row 4 Row 3 Row 2 New Row! Row 5 Row 1
25. IOS ANIMATION PLATFORM • I’ve focused on iOS due to its high performance and obsession with 60FPS • Mature animation API which debuted for macOS (OS X) and was there from the start for iOS
26. IOS ANIMATIONS ARE PERVASIVE • You might not even notice many places that they happen • But they are used through the base OS to give a sense of place, context, and movement
27. APP NAVIGATION
28. APP NAVIGATION
29. APP NAVIGATION
30. APP NAVIGATION
31. INDICATING MOTION OR ACTIVITY
32. INDICATING MOTION OR ACTIVITY
33. SOFTENING ROUTINES
34. SOFTENING ROUTINES
35. SOFTENING ROUTINES
36. SOFTENING ROUTINES
37. SOFTENING ROUTINES
38. CORE ANIMATION • Introduced in OS X 10.5 (“Leopard”, 2007) via (then-secret) iPhone team • Implicit animation model • Don't have to build animation objects • Interpolation is handled automatically
39. LET'S SEE HOW IT WORKS • Visual building block (the view) exists on screen • A view can contain anything • Views are backed by layers, which are their bitmap representations—a sort of snapshot of their contents • Core Animation animates layer property changes by default
40. FADE DEMO
41. FADE DEMO
42. FADE DEMO
43. THE CODE
44. THAT’S IT?
45. LESSON #1: DISCOVERABILITY
46. ENHANCING DISCOVERABILITY • Piggyback on things you are doing in nearby APIs (here, layer property changes) • Consider opting in to a behavior by default
47. ENHANCING DISCOVERABILITY • Build SDKs? • Database initial data • View default background color • First run demo • Build apps? • Default populated data • Partially-hidden content to encourage gestures
48. SLOPES getslopes.com
54. THERE IS A LOT MORE! • Explicit animations • Complex animation building blocks • Keyframe animations • Custom properties • Per-property runtime checks for actions • Replicated layers • Nested transactions • Transitions between views and layers
55. LESSON #2: FLEXIBILITY
56. FLEXIBILITY • Allows for uses beyond the primary use case • But doesn’t bog down the primary use case
57. EXPLICIT ANIMATIONS • Instead of just setting property values, you construct animation objects • Able to customize parameters on individual animations
58. EXPLICIT ANIMATIONS
59. EXPLICIT ANIMATIONS
60. EXPLICIT ANIMATIONS
61. TRANSACTIONS • Allow you to specify custom animation parameters • Allow you to precisely control time, acceleration, and completion actions across multiple animations
62. TRANSACTION EXAMPLE
63. TRANSACTION EXAMPLE
64. TRANSACTION EXAMPLE
65. LESSON #3: MAKE IT INTUITIVE
66. TRANSACTION EXAMPLE REVISITED
67. GRADIENTS
68. GRADIENTS
69. MASKS
70. MASKS
71. GRADIENT & MASK COMBINED
72. GRADIENT & MASK COMBINED
73. GRADIENT & MASK COMBINED
74. LESSON #4: HIDE COMPLEXITY
75. HIDE COMPLEXITY • We use .mask to set a mask • We use .colors to set gradient colors • Complexity of drawing and animating is hidden
76. SPRING ANIMATIONS
77. AS YOU MIGHT EXPECT… • This is trivial in Core Animation • Accomplished with CASpringAnimation • Useful for more organic-feeling interfaces
78. SPRING ANIMATIONS
79. SPRING ANIMATIONS
80. SPRING ANIMATIONS
81. SPRING ANIMATIONS
82. LESSON #5: MAKE IT FUN
83. FUN • Core Animation has a playfulness to it • This reflects the potential for playful interactions in your apps • Admittedly, you don't have to dress up animations very much—it’s not an API like string encoding or task queuing
84. LESSON #6: MAKE IT UNSURPRISING
85. MAKE APIS UNSURPRISING • Consider if the default implicit animation duration was zero seconds • You wouldn’t be able to see animations, even though they were the default behavior!
86. –Principle of Least Astonishment (PoLA) “If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.”
87. SURPRISING APIS • Classic example: a list or array add() or insert() that sorts • Consider what is least surprising to the user, rather than the expected behavior given knowledge of the inner workings
88. LESSON #7: EXTENSIBILITY
89. EXTENSIBLE • Core Animation supports custom properties • Not just the predefined ones like opacity & position
90. EXTENSIBLE
91. EXTENSIBLE
92. EXTENSIBLE
93. EXTENSIBLE
94. LESSON #8: DOCUMENT IT
95. DOCUMENTATION • Not the most glamorous thing, but very important • This is important even for your future self • But especially important for other consumers
103. RECAP 1. Discoverable 2. Flexible 3. Intuitive 4. Hide Complexity 5. Make it fun 6. Keep it unsurprising 7. Allow extensibility 8. Document it
104. THANK YOU! ❤
105. Q&A • Twitter: incanus77 • GitHub: incanus • Web: justinmiller.io • Mapbox: mapbox.com/blog