The Illusion of Life (of a Box)

In 1981 Ollie Johnston and Frank Thomas of Disney animation introduced a recipe to give life to illustrations.

The 12 Principles of Animation

1. Squash and Stretch
2. Anticipation
3. Staging
4. Straight Ahead Action and Pose to Pose
5. Follow Through and Overlapping Action
6. Slow In and Slow Out
7. Arc
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid drawing
12. Appeal

As Game Developers we can use these principles to make juicy animations.

Following is a simple animation I did using Pixi js (an open source webgl renderer ).

This animation doesn’t use any principles other than moving in a arc.

 

 

 

 

 

+ waits before the second movement (Staging)

 

 

 

 

 

+ second movement function is replaced with the smooth step function (Slow In and Slow Out)

 

 

 

 

+ a squash animation is scripted before the second movement (Anticipation)

 

 

 

 

+ a squash and stretch animation is scripted on the end of the first movement (Squash and Stretch)

 

 

 

 

+ a rotation animation is scripted to the end of the second movement (Follow Through and Overlapping Action)

 

 

 

 

+ a squash and stretch values increased and a stretch is scripted in to the second movement (Exaggeration)

 

 

 

 

Following is the js source:

https://github.com/kalanadis/12BasicPrinciplesOfAnimation_Pixi_js

 

Reference
12 basic principles of animation wiki :https://en.wikipedia.org/wiki/12_basic_principles_of_animation

12 Principles of Animation vedio by AlanBeckerTutorials:

https://www.youtube.com/watch?v=uDqjIdI4bF4