Spoiler

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

Quote 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

Quote 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

Quote 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.





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.





This is the same movement as we saw above however there are half as many frames so the motion is faster.





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.





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.





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.





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.







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.







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.





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.





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.









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.





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.





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 out





I'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?

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 LawNewton's 2nd LawNewton's 3rd LawThe 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.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 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.This is the same movement as we saw above however there are half as many frames so the motion is faster.And this is that movement again but with twice as many frames so the motion is slower.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.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.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.Here it is with both ease in and ease out.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.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.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.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.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.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 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.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.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.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.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.

Quote

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.

Quote

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.

Quote

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.

First DraftThe 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 primarily 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 LawNewton's 2nd LawNewton's 3rd LawBy mimicking and exaggerating these laws in animation we are able to convince the viewer that objects have mass. This is the single most important goal if you want to create natural looking animation. A character will not look real if they glide when they run and a giant sword won’t look dangerous if the character can wield it like a stick.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.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 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 imperative, and a skill you will develop as you practice.Spacing is closely tied to timing and refers to the distance an object travels between frames. The timing will inform the spacing and vice versa.This is the same movement as we saw above however there are half as many frames, and the spaces between the frames are larger, so the motion is faster.And this is that movement again but with twice as many frames, and reduced spacing, so the motion is slower.Ease is a basic animation technique which is very closely tied to timing and spacing. As we know from Newton an object will resist a change in its motion. This is a concept known as inertia and has ramifications on every aspect of animation. Simulating inertia is how we communicate that an imaginary object has mass.Due to inertia objects will rarely start or stop moving on a dime, they will accelerate and decelerate. Ease is used when an object is changing speeds, usually when an object which is transitioning from rest into motion or from motion to rest. Ease gives an object the appearance of weight, it implies that the object requires sustained energy to accelerate it to top speed or decelerate it to rest. The amount of ease which is used will give the viewer differing impressions of the weight of an object and also the power of the force being applied to it.In animation you will hear the terms ease in and ease out. These terms are often used interchangeably and refer to different things in different contexts to different people. The most important thing to understand is at which point in a movement you have placed an ease and what the effect is on the perception of motion.This object starts still and ends fast. 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 and its mass.The exact opposite is when the object starts out fast and slows to a stop. This is achieved in the exact opposite way as you would ease in.Here it is with both ease in and ease out.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.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.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 its landing position and bounces back, creating the appearance of weight.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.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 loses forward momentum and accelerates downward due to gravity. When the ball hits the ground 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.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.As touched on in the ease section, inertia is the resistance of an object to changes in its motion. In this section we will be looking at how inertia affects complex articulated systems. 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. The point in the system which moves first, the source of the energy, is called the leading action.Animators will often refer to these effects as follow through and secondary action. And are confusingly intermingled with the separate concept of overlapping action. For the sake of this guide we will be ignoring this terminology as it hinders the explanation of what is a fairly intuitive concept.In this example the leading action is 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 because the inertia of the pink ball was overcome more quickly than the inertia of the pendulum. In the bottom image the pendulum drags behind and then when the pink ball stops the pendulum continues to swing beyond the pink ball. Due to its inertia it won’t stop its motion until the forces of gravity and the weight of the pink ball pulling on it via the string overcome the energy of the ball's motion.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. When the string is taut energy is being transferred, however when the string is loose there is no force to counteract the inertia of the lower ball so it continues on it’s path until gravity overcomes it.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 that the effects of inertia will affect different parts of the object at different times, 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.Stretch and squash may be applied to any object regardless of it’s elasticity in order to increase the appeal of an animation. Common uses are when an object is moving quickly it will stretch and when it stops suddenly it will squash. The amount of stretch and squash will change the feel of an animation dramatically. Stretchy animation often appears more cartoonish.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 is a standard bouncing ball animation and one of the most common examples of stretch and squash.