Hey guys, I’d like to talk to you about thirds in animation and why I think it’s important. You don’t need to have alot of experience in animation to get this, but it is useful to have some.
We’re going to look at the frames between two poses, to illustrate I’ll be using circles, like so.
Circle a is the first position and circle b the second. These are on different frames, so a is on frame one and b is on frame two.
Right now the circle just goes from a to b. We don’t know if the circle is slowing down, speeding up or in what way it moves. It just sort of teleports.
Now we’re going to add some frames in between the poses, this is where the magic happens. Say we want the circle to start at a and slow down to b and we don’t want to use too many frames. So the question is; where do we put the next frame? If it needs to slow down we need the next circle to be closer to b, that way the distance the circle travels shrinks. Now that’s easy when it’s just a circle but what about when it’s an entire figure going from point a to b? What most people do is they put a frame smack dab in the middle of a and b, then from there they put a frame in the middle of the new frame and frame b and keep going until they’re satisfied with the amount the circle has slowed down. Like so.
So in this example position a is on frame one, the first red circle is on frame two, the next on three, four and frame b is on frame five. Oh boy! The circle slows down! The distance the circle travels keeps getting shorter so to our beautiful human eyes the speed of the circle lowers. Now this is fine, the circle slows down, we did our job and we can go home, right? Well, there’s a problem here, namely:
As you can see on this unnumbered diagram there is indeed a slowdown when the circle goes from frame a to to 2. But what’s that? There’s no slowdown between the frames 1, 2 and b. The distance is the same. No matter how many times you put a frame in the middle between frame 2 and b the last three frames will never experience a slowdown. The circle never actually slows down in the end! So what do we do? we could put a circle really close to frame b, that way there’s a slowdown. But this method can get sloppy and remember, this example is just with circles.
So here’s the solution, we put the circle in two thirds of the way between frame a and b. Like so:
Look! the circle slows down, it slows down with just one frame in between a and b. Now I have to admit, putting a frame right in the middle between two other frames is easier than dividing them in thirds, but with practice this can be done, and it looks way better. You can even give the circle a constant speed by putting it on a third and two thirds of the way, like so:
I’m not saying you should only use thirds. You should add it in your arsenal and combine it with putting frames in the middle. So when should you use thirds and when should you use halves(middles?).
It all depends on how fast you want a certain action to be. Let’s say we want the circle to slowly start moving from a, pick up speed and ease in on b. And we want this action to last 5 frames. (that would be one fifth of a second if you work on 25 frames per second).
As you can see we combined the principle of putting frames in the middle and putting them on thirds. How I go about this is I first make positions a and b (the beginning and end position). After that I put circle 1 smack dab in the middle of a and b. There is no slowdown at this point, the circle has a constant speed. Lastly I create circles 2. The first circle 2 is one third of the way between a and 1, the second circle is two thirds of the way between 1 and b. so just for clarification: circle a is on frame one, the first circle 2 is on frame two, circle 1 is on frame three, the second 2 is on frame four and b is on frame five.
I hope this will help you in your future animations, I certainly had an “Aha!” moment when I figured this out.
If you have any questions you can always ask me on tumblr or twitter, thanks for reading!
stormborns
origamiaround
turnnoffyourmind
discoholicmusic
yousharknotpass
baratheonpilled
pixelskylines
