Here's my rough draft of the basic principles section.The physics of animation The key to convincing animation is creating movements that mimic what we see in the real world and that means being aware of the physics of movement. In animation we primarly deal with kinetic energy, this is the energy of movement and it can come from many places. The two most common sources of energy for an animator are muscles and gravity. Depending on what you're animating energy can come from many other places as well, for example: motors, explosions, the wind and water currents. What these sources have in common is that when applied to a mass they will accelerate that mass in some direction.
The most important laws of physics for an animator to be aware of are Newton's Three Laws of Motion. In particular understanding Newton's 1st law will help you to create more natural animation.
Newton's 1st Law
Every body persists in its state of being at rest or of moving uniformly straight forward, except insofar as it is compelled to change its state by force impressed.
Newton's 2nd Law
Law II: The alteration of motion is ever proportional to the motive force impress'd; and is made in the direction of the right line in which that force is impress'd.
Newton's 3rd Law
Law III: To every action there is always opposed an equal reaction: or the mutual actions of two bodies upon each other are always equal, and directed to contrary parts.
I intend to write a little digestion of each of these and how they're relevant to animation.Basic movement The most basic form of animation is translation. That is, taking a drawing, and then in the next frame taking the same drawing and moving it to some other place. Most animation is going to be based on translation. If the frame is spaced correctly in relation to the previous and following frames, you will create the illusion of movement.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Basic%20translated%20movement_zpsdq3aro3m.gif)
This the simplest kind of translation, in each frame the circle moves the same number of pixels, and each movement takes the same amount of time.
Timing Timing refers to the amount of time it takes to perform an action. Essentially how fast or slow a movement appears. This is manipulated by adding or removing frames. The timing of a motion is going to be extremely important to to the final appearance of an animation. A good sense of timing is imperitive, and a skill you will develop as you practice.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Faster%20timing_zpsqcjnf6x7.gif)
This is the same movement as we saw above however there are half as many frames so the motion is faster.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Slower%20timing_zpsbiz2vyti.gif)
And this is that movement again but with twice as many frames so the motion is slower.
Ease in and ease out Ease in and ease out are two very similar concepts. As we know from Newton an object will resist a change in its motion. Because of this objects will rarely start or stop moving on a dime, they will accelerate and decelerate.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20in_zps1jq5czmd.gif)
This object starts still and ends fast, it
eases into it's movement. This is achieved by moving each frame slightly further on each successive frame, so in the first frame it moves 3 pixels, in the second 6, in the third 12 and so on. The movement is exponential, how dramatically so will depend on the force being applied to the object.
This could probably be stated better, to address top speed but I can't think of easily understandable terminology to describe an s curve.(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20out_zpsa792xnlp.gif)
The exact opposite is when the object starts out fast and slows to a stop, it
eases out of it's movement. This is achieved in the exact opposite way as you would ease in.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20in%20and%20out_zpskicbr2r1.gif)
Here it is with both ease in and ease out.
Anticipation and overshoot Anticipation and overshoot are related concepts and are achieved in a similar manner however they occur for distinct reasons. When an object begins to move -and especially when that object is a character- you can create what is called an "anticipation" frame in which the object first moves in the opposite to intended direction. Think of it like winding up a punch. This frame primes the viewer to anticipate the following movement and makes it much easier to comprehend.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20out%20hold_zps4mrcnkml.gif)
(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20out%20anticipation_zpsumrw40qc.gif)
In the top image the circle immediately jumps into motion and it is difficult to follow and the eye may lose track of it. In the lower image the circle steps back a few pixels first and then jumps forward and is consequently much easier to follow.
Overshoot is almost like the opposite of an anticipation but it occurs when an object comes to an abrupt stop. Remember Newton's first law, that objects in motion will remain in motion unless another force acts upon them. Try punching the air, you will find that your fist tends to bounce back at the end. This is because your fist in motion has a lot of kinetic energy and wants to keep moving so it pulls your arm out to it's full extension before the opposing force of your body structure returns it to a resting position.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20in%20hold_zpsrdoygvoy.gif)
(http://i157.photobucket.com/albums/t42/The_32nd_day/Ease%20in%20overshoot_zps1rhouela.gif)
In the top image the circle stops immediately and you do not get a sense that it has any mass. In the bottom image the circle overshoots it's landing position and bounces back, creating the appearance of weight.
I'm getting something strange here where the animations are out of sync, maybe because the webpage loaded them at different times? Probably doesn't matter, I can put them into the same .gif if it makes the difference easier to see.Arcs Almost everything that moves on Earth moves in an arc. In some cases this is due to gravity and the nature of acceleration. In others it is due to the motion of levers. When you animate you need to ensure that any object not moving in a straight line is moving in an arc, all objects should follow a smooth path, if the object strays from this path your animation will appear to jitter.
(http://i157.photobucket.com/albums/t42/The_32nd_day/ball%20throw%20arc_zps2rk8khiu.gif)
This is a ball being shot out horizontally and being pulled toward the ground by gravity. Observe that in each successive frame the ball decelerates horizontally as it looses forward momentum and accelerates downward due to gravity. When the ball hits the gound the downward force is reflected into upwards force and the ball bounces. Simply by applying these two natural forces you can see that the motion creates a smooth, natural arc.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Pendululm%20arcs_zps1n7zy1qn.gif)
A pendulum is a simple lever system with the pivot at the top and the weight at the bottom. Because the length of the rod doesn't change as the weight moves side to side it also moves up and down, creating an arc. The human body is a more complicated lever system with multiple joints but for the same reason; When we move we tend to do so in arcs.
Follow through and overlapping action Follow through and overlapping action is the way we describe the effects of inertia. As we know objects want to stay in their current motion so when a force is applied an object it will resist change. Depending on where the force is applied to a system different parts will move at different rates and in different synchronicities. Simply put, everything doesn't move together, and everything doesn't come to a stop at once.
(http://i157.photobucket.com/albums/t42/The_32nd_day/Follow%20through%20wrong_zpsuptvqmwd.gif)
(http://i157.photobucket.com/albums/t42/The_32nd_day/overlapping%20action_zpsojibigfm.gif)
(http://i157.photobucket.com/albums/t42/The_32nd_day/Follow%20through%20right_zpsfyd5em1v.gif)
In this example the force is being applied to the pink ball, from which a pendulum hangs. In the top image everything moves at the same rate and we don't get a sense that there is a joint at all. In the centre image the pink ball stays in motion and the pendulum drags behind it, this is
overlapping action. In the bottom image the pendulum drags behind and then when the pink ball stops the pendulum
follows through on it's movement.
(http://i157.photobucket.com/albums/t42/The_32nd_day/overlapping%20action%20vertical_zps592xncxr.gif)
Here there is a pink ball to which force is being applied and another ball attached to it by a string. As the pink ball comes down the black ball continues to rise and as the pink ball begins to move up the black ball continues downwards.
Stretch and squash All objects have some elasticity. Depending on the materials the object may be able to deform a little or a lot. When an object is able to deform that means follow through and overlapping action will come into effect, if the force is being applied to a particular part of an object then parts of the object which do not have force applied to them will lag behind. This causes objects to stretch and squash in when in motion. The mass of the object always stays the same; So if an object stretches is will get longer and thinner, and if it squashes it will get shorter and fatter.
(http://i157.photobucket.com/albums/t42/The_32nd_day/overlapping%20action%20ball_zpsexs5nvjt.gif)
This is the same visualisation as above however instead of two balls connected by string this is a single ball with the force being applied to the top and the energy being transferred around the elastic surface of the ball to the bottom.
This example is probably a bit confusing due to looking like theres actually a ball inside at the bottom stretching it outI'm thinking I should add timing charts to all of these. I'll also be adding an analysis of a relevant animation to each as stated above.
Also might be fun to add some way of the pixel theming to this, swords and kunai on chains and ninja stars and stuff. I dunno if there's mockups for the future re-skin but I wouldn't mind making the examples fit in with the theme.
Is there a way to format this so it doesn't stretch out across the whole length of the frame?