[ux series] 6 - animation principles
TRANSCRIPT
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