[UX Series] 6 - Animation principles

Download [UX Series] 6 - Animation principles

Post on 12-Apr-2017




1 download

Embed Size (px)


<p>FileNewTemplate</p> <p>ANIMATION PRINCIPLESVu Phuong Hoang2015/08</p> <p>1</p> <p>The 12 principles of animationFrom the famous bookBy Frank Thomas &amp; Ollie JohnstonPublished in 1981Bible of animation</p> <p>2</p> <p>The 12 principles of animationSquash and stretchAnticipationStagingStraight ahead action and Pose to poseFollow through and Overlapping actionSlow in and Slow outArcSecondary actionTimingExaggerationSolid drawingAppeal</p> <p>3</p> <p>1.1. Squash &amp; stretch</p> <p>Make object longer or wider to emphasize:SpeedMomentumWeightMass</p> <p>4</p> <p>1.1. Squash &amp; stretchNote:More squash &amp; stretch means softerLess squash &amp; stretch means stifferKeep the volume consistentDont overdo this</p> <p>5</p> <p>1.1. Squash &amp; stretch</p> <p>Nike makers6</p> <p>1.2. Anticipation</p> <p>Prepare for next action to make it more realisticIt helps communicate actions with viewers</p> <p>7</p> <p>1.2. AnticipationNote:Viewers tend to look at where the characters looking atUse multi-levels anticipation if necessary</p> <p>8</p> <p>1.2. Anticipation</p> <p>9</p> <p>1.3. Staging</p> <p>Make sure that viewers knows where to look at by using:CameraLightDirection...</p> <p>Help them understand the ideas</p> <p>10</p> <p>1.3. StagingNote:Use far-away camera for big actionUse close-up camera for expressionUse pauses properlyAdd supplementariesRemove redundant things</p> <p>11</p> <p>1.3. Staging</p> <p>Yelp Shop, restaurants locator</p> <p>National Geographic Travel, natural science magazine</p> <p>Show them how iPod changes app12</p> <p>1.4. Straight ahead action, pose to pose</p> <p>Draw frame by frameDraw keyframes firstDraw in-between frames later</p> <p>13</p> <p>1.4. Straight ahead action, pose to poseStraight ahead actionFor undefined shapesCan combine with pose-to-posePose to poseFor defined shapesEasy to maintain sizeCan have levels of detailEasy to change frame</p> <p>14</p> <p>1.4. Straight ahead action, pose to pose</p> <p>Fruit Ninja Straight ahead action15</p> <p>1.4. Straight ahead action, pose to pose</p> <p>Plants vs Zombies Pose to pose16</p> <p>1.5. Follow through, overlapping action</p> <p>For more realistic movementsFollow through: Appendage should continue moving after the main body has stoppedOverlapping action: Appendage should move with different ratesDrag: Appendage should start moving a few frames after the main body</p> <p>Bodies in motion dont move all at once</p> <p>17</p> <p>1.5. Follow through, overlapping actionNote:How appendage move depends on its natureAdd appendage after finishing main bodys animationUse previous frame as indicatorHow your arms move ?</p> <p>18</p> <p>1.5. Follow through, overlapping action</p> <p>DOTS matching game19</p> <p>Music player concept20</p> <p>1.6. Slow in and Slow out</p> <p>To simulate accelerationObjects need time to accelerate and slow down</p> <p>21</p> <p>1.6. Slow in and Slow outNote:Follow physical lawsAnalyze frames to adjustBe familiar with Bezier curves</p> <p>22</p> <p>1.6. Slow in and Slow out</p> <p>Hamburger menu transition example23</p> <p>1.6. Slow in and Slow out</p> <p>24</p> <p>1.7. Arcs</p> <p>Most natural actions follow an arched trajectory</p> <p>25</p> <p>1.7. ArcsNote:Arcs can help maintain size</p> <p>Use arcs to guide motions</p> <p>Connect poses by smears</p> <p>26</p> <p>1.7. Arcs</p> <p>Googles Material Design guidelines27</p> <p>1.8. Secondary action</p> <p>Support main action</p> <p>28</p> <p>1.8. Secondary actionNote:Secondary actions can express the personalities and expressionsDont take attention away from main action remember Staging ?</p> <p>29</p> <p>Food app concept: boiling animation has the moving lid30</p> <p>1.9. Timing</p> <p>Time represents nature and personalities</p> <p>31</p> <p>1.9. TimingNote:An action can have different meanings depending on durationSlow motion can be jittery if drawing on oneDrawing on one can have more details</p> <p>32</p> <p>Flight booking app concept33</p> <p>1.10. Exxageration</p> <p>Represent action in a wilder, more extreme form</p> <p>34</p> <p>1.10. ExxagerationExxageration make action more apparentDont distort object too muchExtreme form has to become to normal after exxagerationExxageration duration affects the extreme levelTry and adjust</p> <p>35</p> <p>1.10. Exxageration</p> <p>Modal windows concept36</p> <p>Holoterial advertisements37</p> <p>1.11. Solid drawing</p> <p>Take 3D forms into account when drawing</p> <p>38</p> <p>1.11. Solid drawingFollow principles of perspective:Cubes edges should be bent towards the vanishing pointFollow the contour of the spheres surfaceDraw perspective lines on the ground to track the distance</p> <p>39</p> <p>1.11. Solid drawingUse basic shapes to form the objectAdd overlap details to define where surfaces come out and recedePaired features should not do the same thing at a time</p> <p>40</p> <p>1.12. Appeal</p> <p>Make the character interesting to look at</p> <p>41</p> <p>1.12. Appeal3 steps for dynamic design:Use variety of shapesPlay with proportionsKeep it simple</p> <p>42</p> <p>The 12 principles of animation</p> <p>SUMMARY</p> <p>43</p> <p>ReferencesWikipediaDigital tutors (3D animation)The illusion of life Tumblr (GIF)The art of UI animations (Slide)HowDesign.com (Motion examples)University of Washington (Comparison)CSS AnimationSmashing MagazineGoogles material design</p> <p>44</p> <p>Any questions?</p> <p>45</p>