Think Like an Animator

Transcript

1. #thinklikeananimator
2. #thinklikeananimator
3. Kevin Grant Zack Sultan zsultan.tumblr.com @ZackSultan kevinthebigapple.tumblr.com @kevingrant5
4. 1. Animation’s early history 2. Properties of animation 3. How do you make it good?
5. 30,000 years ago 1. #thinklikeananimator
6. Chauvet Cave
7. Phenakistoscope (1841)
8. Gertie the Dinosaur (1914)
9. Gertie the Dinosaur (1914) Gertie The Dinosaur (1914)
10. Alice’s Wonderland (1923)
11. The Old Mill (1937)
15. Nearly all good animation is based on 4 properties. 2. #thinklikeananimator
20. +
26. You can animate anything* with these four properties. #thinklikeananimator
27. What makes good animation? 3. #thinklikeananimator
28. 1930s
29. 12 Principles of Animation Collected by Ollie Johnston and Frank Thomas “The Illusion of Life” (1981) #thinklikeananimator
30. 1. Squash and Stretch 2. Anticipation 3. Staging 4. Straight ahead action vs. pose to pose 5. Follow through and Overlapping action 6. Secondary action 7. Slow in and Slow out 8. Arcs 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal #thinklikeananimator
31. 1. Squash and Stretch 2. Anticipation 3. Staging 4. Straight ahead action vs. pose to pose 5. Follow through and Overlapping action 6. Secondary action 7. Slow in and Slow out 8. Arcs 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal #thinklikeananimator
32. 1. Squash and Stretch 2. Anticipation 3. Staging 4. Straight ahead action vs. pose to pose 5. Follow through and Overlapping action 6. Secondary action 7. Slow in and Slow out 8. Arcs 9. Timing 10. Exaggeration 11. Solid drawing 12. Appeal??? ??? #thinklikeananimator
33. 6 Weird Tricks of App Animation #thinklikeananimator
34. 1. Direction 2. Ease 3. Anticipation, overshoot, and spring 4. Overlapping action 5. Timing 6. Consistency #thinklikeananimator
35. Direction 1. #thinklikeananimator
37. Bad direction #thinklikeananimator
38. Custom example: Photo lightbox
39. Custom example: Photo lightbox
40. Example: Default back button
44. “Meaningful transitions”
47. Good animation is wayfinding #thinklikeananimator
48. Ease 2.
50. Frames “In betweens”
52. In betweens
55. Time Position
56. Linear Eased
57. Custom example: page reveal Custom example: page reveal Linear motion Ease
58. Linear (Default) 1 2.5 5 ?
59. Good animation is smooth. #notarobot #thinklikeananimator
60. Anticipation, follow through, & spring #3
62. Time Position
63. Time Position
64. Squash & Stretch
65. Squash & Stretch
66. Squash & Stretch
67. Squash & Stretch
70. Spring is the leather texture of UI animation #thinklikeananimator
72. Dots
73. Good animation is invisible #thinklikeananimator
74. Overlapping action 4.
78. Interfaces have skeletons #thinklikeananimator
80. Say no to glop #thinklikeananimator
81. Say yes to Spine #thinklikeananimator
90. #minsdk21 Architect for animation #thinklikeananimator
91. • Tightly Coupled • Inflexible • Hard to iterate Single Activity
92. Dual Activity
93. Good animation creates hierarchy #thinklikeananimator
94. Timing 5.
97. ~300ms Golden timing: #thinklikeananimator
99. 700ms
100. Never block user interactions #thinklikeananimator
101. Good animation feels responsive. #thinklikeananimator
102. Consistency #6 #thinklikeananimator
103. Gmail search Play games
104. Good animation is, above all, consistent. #thinklikeananimator
105. A few last thoughts #thinklikeananimator
106. You can be an animator #thinklikeananimator
107. Design for the latest and greatest Gracefully degrade later #thinklikeananimator
108. Less crazy, more better #thinklikeananimator
109. Kevin Grant Zack Sultan zsultan.tumblr.com @ZackSultan kevinthebigapple.tumblr.com @kevingrant5 #thinklikeananimator #thinklikeananimator #thinklikeananimator #thinklikeananimator #thinklikeananimator #thinklikeananimator tumblr.com/jobs tumblr.com/jobs