FileNewTemplate

ANIMATION PRINCIPLESVu Phuong Hoang2015/08

1

The 12 principles of animationFrom the famous bookBy Frank Thomas & Ollie JohnstonPublished in 1981Bible of animation

2

The 12 principles of animationSquash and stretchAnticipationStagingStraight ahead action and Pose to poseFollow through and Overlapping actionSlow in and Slow outArcSecondary actionTimingExaggerationSolid drawingAppeal

3

1.1. Squash & stretch

Make object longer or wider to emphasize:SpeedMomentumWeightMass

4

1.1. Squash & stretchNote:More squash & stretch means softerLess squash & stretch means stifferKeep the volume consistentDont overdo this

5

1.1. Squash & stretch

Nike makers6

1.2. Anticipation

Prepare for next action to make it more realisticIt helps communicate actions with viewers

7

1.2. AnticipationNote:Viewers tend to look at where the characters looking atUse multi-levels anticipation if necessary

8

1.2. Anticipation

9

1.3. Staging

Make sure that viewers knows where to look at by using:CameraLightDirection...

Help them understand the ideas

10

1.3. StagingNote:Use far-away camera for big actionUse close-up camera for expressionUse pauses properlyAdd supplementariesRemove redundant things

11

1.3. Staging

Yelp Shop, restaurants locator

National Geographic Travel, natural science magazine

Show them how iPod changes app12

1.4. Straight ahead action, pose to pose

Draw frame by frameDraw keyframes firstDraw in-between frames later

13

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

14

1.4. Straight ahead action, pose to pose

Fruit Ninja Straight ahead action15

1.4. Straight ahead action, pose to pose

Plants vs Zombies Pose to pose16

1.5. Follow through, overlapping action

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

Bodies in motion dont move all at once

17

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 ?

18

1.5. Follow through, overlapping action

DOTS matching game19

Music player concept20

1.6. Slow in and Slow out

To simulate accelerationObjects need time to accelerate and slow down

21

1.6. Slow in and Slow outNote:Follow physical lawsAnalyze frames to adjustBe familiar with Bezier curves

22

1.6. Slow in and Slow out

Hamburger menu transition example23

1.6. Slow in and Slow out

24

1.7. Arcs

Most natural actions follow an arched trajectory

25

1.7. ArcsNote:Arcs can help maintain size

Use arcs to guide motions

Connect poses by smears

26

1.7. Arcs

Googles Material Design guidelines27

1.8. Secondary action

Support main action

28

1.8. Secondary actionNote:Secondary actions can express the personalities and expressionsDont take attention away from main action remember Staging ?

29

Food app concept: boiling animation has the moving lid30

1.9. Timing

Time represents nature and personalities

31

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

32

Flight booking app concept33

1.10. Exxageration

Represent action in a wilder, more extreme form

34

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

35

1.10. Exxageration

Modal windows concept36

Holoterial advertisements37

1.11. Solid drawing

Take 3D forms into account when drawing

38

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

39

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

40

1.12. Appeal

Make the character interesting to look at

41

1.12. Appeal3 steps for dynamic design:Use variety of shapesPlay with proportionsKeep it simple

42

The 12 principles of animation

SUMMARY

43

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

44

Any questions?

45