Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Think Like an Animator

82ed24e2672b136c2608ad8c41692e77?s=47 Zack Sultan
March 16, 2015

Think Like an Animator

82ed24e2672b136c2608ad8c41692e77?s=128

Zack Sultan

March 16, 2015
Tweet

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)

  12. None
  13. None
  14. None
  15. Nearly all good animation is based on 4 properties. 2.

    #thinklikeananimator
  16. None
  17. None
  18. None
  19. None
  20. +

  21. None
  22. None
  23. None
  24. None
  25. None
  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

  36. None
  37. Bad direction #thinklikeananimator

  38. Custom example: Photo lightbox

  39. Custom example: Photo lightbox

  40. Example: Default back button

  41. None
  42. None
  43. None
  44. “Meaningful transitions”

  45. None
  46. None
  47. Good animation is wayfinding #thinklikeananimator

  48. Ease 2.

  49. None
  50. Frames “In betweens”

  51. None
  52. In betweens

  53. None
  54. None
  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

  61. None
  62. Time Position

  63. Time Position

  64. Squash & Stretch

  65. Squash & Stretch

  66. Squash & Stretch

  67. Squash & Stretch

  68. None
  69. None
  70. Spring is the leather texture of UI animation #thinklikeananimator

  71. None
  72. Dots

  73. Good animation is invisible #thinklikeananimator

  74. Overlapping action 4.

  75. None
  76. None
  77. None
  78. Interfaces have skeletons #thinklikeananimator

  79. None
  80. Say no to glop #thinklikeananimator

  81. Say yes to Spine #thinklikeananimator

  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  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.

  95. None
  96. None
  97. ~300ms Golden timing: #thinklikeananimator

  98. None
  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