Post by Theropod on Oct 6, 2013 17:56:47 GMT
Easing Tutorial - Smoother Movements
Pivs are included
Please vote in the poll - It takes one click only. If everyone who reads this tutorial votes, I will obviously know if this was a helpful tutorial. Thank you in advance.
----------------------------------------------------------------------------------------------------------
What is Easing?
It's called Movement Spacing, but most people call it "Easing". Spacing is all about speed. Spacing is the easiest thing to talk about because it can be broken down into simple steps. First, to those who do not understand, the term "Spacing" refers to the spatial distance that something moves between two frames. Often, when people explain spacing in tutorials, they'll give an idea like this:
Key: Frames |
Pixels -
|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|
Pixels -
|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|
This would represent something moving two pixels each frame over a period of 16 frames. This is called "Flat Spacing", or simply no easing.
This animation uses Flat Spacing/No Easing:
Now, Easing and spacing are not the same thing. Spacing refers only to speed, while easing refers to change in speed, or acceleration. For this to work, the distance moved on each frame would have to increase (or decrease) with each frame that passes. When plotted on a graph, you would end up with some form of gradient.
Flat Easing
This is the most basic form of easing. This is different from Flat Spacing, because it was said earlier, Spacing is Speed, and Easing is Acceleration. This method is called "Flat Easing" because when plotted on a graph, you end up with a flat gradient, or a flat diagonal line. The method is when the distance that you move something increases by the same number of pixels on each frame. For example, this is what 1px Flat Easing looks like.
Frame 1 - Pixels 1
Frame 2 - Pixels 2
Frame 3 - Pixels 3
Frame 4 - Pixels 4
Frame 5 - Pixels 5
|-|--|---|----|-----|
Frame 2 - Pixels 2
Frame 3 - Pixels 3
Frame 4 - Pixels 4
Frame 5 - Pixels 5
|-|--|---|----|-----|
Please read this part.
Since this is the easiest form of easing to understand, most beginner animators will be familiar with Flat Easing in one or more of its forms. This particular form of Flat Easing (1px) results in extremely over-eased movements, which would be incredibly slow and boring. I am of the opinion that this form of easing will not even result in smooth movements.
If you want your movements to be eased in a smoother way, then you will want to aim for a smooth curve on the easing graph. This may sound hard, but it is actually very simple. Now pay close attention here, this is a bit technical.
These mathematical forms of easing are called "raw easing", in the sense that when broken down into its most basic form, this is what you get. The easing techniques below were not made by me.
If you want your movements to be eased in a smoother way, then you will want to aim for a smooth curve on the easing graph. This may sound hard, but it is actually very simple. Now pay close attention here, this is a bit technical.
These mathematical forms of easing are called "raw easing", in the sense that when broken down into its most basic form, this is what you get. The easing techniques below were not made by me.
Double Easing
Very simple. The distance moved in pixels doubles on each frame.
Frame 1 - Pixels 1
Frame 2 - Pixels 2
Frame 3 - Pixels 4
Frame 4 - Pixels 8
Frame 5 - Pixels 16
|-|--|----|--------|----------------|
Frame 1 - Pixels 1
Frame 2 - Pixels 2
Frame 3 - Pixels 4
Frame 4 - Pixels 8
Frame 5 - Pixels 16
|-|--|----|--------|----------------|
Sigma Easing
An easing technique invented by OblivionFall, I credit him for this technique. It is derived from the mathematical concept of "sigma" where all the lesser components of a number are summed up into a new number.
Frame 1 - Pixels 1 (1)
Frame 2 - Pixels 3 (2+1)
Frame 3 - Pixels 6 (3+2+1)
Frame 4 - Pixels 10 (4+3+2+1)
Frame 5 - Pixels 15 (5+4+3+2+1)
|-|---|------|----------|--------------|
Frame 2 - Pixels 3 (2+1)
Frame 3 - Pixels 6 (3+2+1)
Frame 4 - Pixels 10 (4+3+2+1)
Frame 5 - Pixels 15 (5+4+3+2+1)
|-|---|------|----------|--------------|
Parabola Easing
This is when you space your movements according to the formula P = F^2. You move your object the same number of pixels as the number of frames squared.
Frame 1 - Pixels 1 (1^2)
Frame 2 - Pixels 4 (2^2)
Frame 3 - Pixels 9 (3^2)
Frame 4 - Pixels 16 (4^2)
Frame 5 - Pixels 25 (5^2)
|-|----|---------|----------------|-------------------------|
Frame 2 - Pixels 4 (2^2)
Frame 3 - Pixels 9 (3^2)
Frame 4 - Pixels 16 (4^2)
Frame 5 - Pixels 25 (5^2)
|-|----|---------|----------------|-------------------------|
Parabola Easing Example .Piv
I've never attempted this type of easing before. I imagine it'd be very fast and sudden, as it gets steep very quickly. In any case, anybody who has done senior level Mathematics at school will know that there are any ways of changing the shape of a parabola to make it steeper or shallower, and those methods can be used here.
Now that you know some forms of "raw" easing, let me wrap up by saying just a few more things. Never, ever follow this form of easing for stick movements 100%. It's fine when you're doing physics simulations with plain objects, or camera movements, but don't follow these easing forms exactly when you create your stick movements, it's better to use them as a rough guideline. Why? Because otherwise your movements might very well be restricted, as when you factor muscle control into the mix, real life movements can become sudden, and almost non eased. I know some of you will not be fans of realism, but this aspect of the style at least, should be able to benefit animators in all other categories.