Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
#thinklikeananimator
Slide 2
Slide 2 text
#thinklikeananimator
Slide 3
Slide 3 text
Kevin Grant Zack Sultan zsultan.tumblr.com @ZackSultan kevinthebigapple.tumblr.com @kevingrant5
Slide 4
Slide 4 text
1. Animation’s early history 2. Properties of animation 3. How do you make it good?
Slide 5
Slide 5 text
30,000 years ago 1. #thinklikeananimator
Slide 6
Slide 6 text
Chauvet Cave
Slide 7
Slide 7 text
Phenakistoscope (1841)
Slide 8
Slide 8 text
Gertie the Dinosaur (1914)
Slide 9
Slide 9 text
Gertie the Dinosaur (1914) Gertie The Dinosaur (1914)
Slide 10
Slide 10 text
Alice’s Wonderland (1923)
Slide 11
Slide 11 text
The Old Mill (1937)
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Nearly all good animation is based on 4 properties. 2. #thinklikeananimator
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
+
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
You can animate anything* with these four properties. #thinklikeananimator
Slide 27
Slide 27 text
What makes good animation? 3. #thinklikeananimator
Slide 28
Slide 28 text
1930s
Slide 29
Slide 29 text
12 Principles of Animation Collected by Ollie Johnston and Frank Thomas “The Illusion of Life” (1981) #thinklikeananimator
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
6 Weird Tricks of App Animation #thinklikeananimator
Slide 34
Slide 34 text
1. Direction 2. Ease 3. Anticipation, overshoot, and spring 4. Overlapping action 5. Timing 6. Consistency #thinklikeananimator
Slide 35
Slide 35 text
Direction 1. #thinklikeananimator
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Bad direction #thinklikeananimator
Slide 38
Slide 38 text
Custom example: Photo lightbox
Slide 39
Slide 39 text
Custom example: Photo lightbox
Slide 40
Slide 40 text
Example: Default back button
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
“Meaningful transitions”
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Good animation is wayfinding #thinklikeananimator
Slide 48
Slide 48 text
Ease 2.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Frames “In betweens”
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
In betweens
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Time Position
Slide 56
Slide 56 text
Linear Eased
Slide 57
Slide 57 text
Custom example: page reveal Custom example: page reveal Linear motion Ease
Slide 58
Slide 58 text
Linear (Default) 1 2.5 5 ?
Slide 59
Slide 59 text
Good animation is smooth. #notarobot #thinklikeananimator
Slide 60
Slide 60 text
Anticipation, follow through, & spring #3
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Time Position
Slide 63
Slide 63 text
Time Position
Slide 64
Slide 64 text
Squash & Stretch
Slide 65
Slide 65 text
Squash & Stretch
Slide 66
Slide 66 text
Squash & Stretch
Slide 67
Slide 67 text
Squash & Stretch
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Spring is the leather texture of UI animation #thinklikeananimator
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Dots
Slide 73
Slide 73 text
Good animation is invisible #thinklikeananimator
Slide 74
Slide 74 text
Overlapping action 4.
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Interfaces have skeletons #thinklikeananimator
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Say no to glop #thinklikeananimator
Slide 81
Slide 81 text
Say yes to Spine #thinklikeananimator
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
#minsdk21 Architect for animation #thinklikeananimator
Slide 91
Slide 91 text
• Tightly Coupled • Inflexible • Hard to iterate Single Activity
Slide 92
Slide 92 text
Dual Activity
Slide 93
Slide 93 text
Good animation creates hierarchy #thinklikeananimator
Slide 94
Slide 94 text
Timing 5.
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
~300ms Golden timing: #thinklikeananimator
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
700ms
Slide 100
Slide 100 text
Never block user interactions #thinklikeananimator
Slide 101
Slide 101 text
Good animation feels responsive. #thinklikeananimator
Slide 102
Slide 102 text
Consistency #6 #thinklikeananimator
Slide 103
Slide 103 text
Gmail search Play games
Slide 104
Slide 104 text
Good animation is, above all, consistent. #thinklikeananimator
Slide 105
Slide 105 text
A few last thoughts #thinklikeananimator
Slide 106
Slide 106 text
You can be an animator #thinklikeananimator
Slide 107
Slide 107 text
Design for the latest and greatest Gracefully degrade later #thinklikeananimator
Slide 108
Slide 108 text
Less crazy, more better #thinklikeananimator
Slide 109
Slide 109 text
Kevin Grant Zack Sultan zsultan.tumblr.com @ZackSultan kevinthebigapple.tumblr.com @kevingrant5 #thinklikeananimator #thinklikeananimator #thinklikeananimator #thinklikeananimator #thinklikeananimator #thinklikeananimator tumblr.com/jobs tumblr.com/jobs