Basics of animation creation

Adding some appeal

If you hit play from there, you should have something that looks fine enough. In this section, we will see how to turn this into an even more good looking animation.

This is the second step of the methodology. We’ll start to go into “big” details first, with the in-between and the slow in/out, then directly jump in the third steps with the tiny details of overlap and follow through.

All those notions are described in the 12 principles of animation, of Frank Thomas.

The Illusion of Life, 12 Basic Principle of Animation; online video, Youtube; 2:46

A selection of F. Thomas’s principles is totally applicable to give an illusion of life to the robot :

  1. Anticipation
  2. Straight ahead and pose to pose
  3. Overlap and follow through
  4. Slow in/out
  5. Arcs
  6. Timing

We will spread thesese golden principles into the following.

But first, let’s check what we’ve done so far and bring it further!

1. Methodology, steps further

Your animation now looks a bit fancier, good work on this!

But the work is far from done!

Even if your animation is already one level above a really basic one, you can add a lot of little things that will make it look like a real animator’s animation.

a. Slow Out

This is the end of a movement, the time where your fast moving arm start to slow down until it stops. This will be done using two different ways. Either you continue the movement by putting a key a few frames after your finished move, and slightly change the position to give the impression that the original movement sort of “dies” slowly, or you change that key to give a bit of opposite movement, to give a compensation feeling, like chan you straighten your arm very fast, then your elbow bends a little bit again.

b. In-between

They are the keys you will put between two key poses. They have nothing special and basically are key poses themselves, but as they usually are not “whole body” keys and are there only to make the movement look better, they are called this way. With them, you can create arcs and delay on your movements, which are two important notions in the animation world.

With the in-between, your animation will be technically completed.

c. Overlap and Follow through

But even if the animation is technically complete, we can still go a bit more into details (remember, this will be the step 3!).

Overlapping means you will decide what part of the robot moves first and continue last. This will create a fluid and seamless movement. The follow through is nothing more than the same principle, but for the end of a movement instead of the beginning. This is what’s illustrated at 1:01 in the 12 principles of animation video.

d. Desynchronization

At last, and in the same step, you will desynchronize the head from the arms, the left arm from the right one and the arms from the legs. This way the animation will truly be finished and nice to look at.

You could learn a lot referring to the Animator’s Survival Kit from Richard Williams or to the 12 Principles of Animation contained in “The Illusion Of Life” from Frank Thomas, but meanwhile you can follow the advice below to get initiated.

2. … To Specific

a. Slow Out

Only robots end their movement in a split second. To give another natural feeling, we will add some slow out to the freeze we’ve got.

So click on the second pose of the freeze, and move just a little bit the elbow downward. You can also close the fingers a bit. Think about this like a rebound : if you open your fingers very fast and let your hand relax again, your fingers will like “rebound” from the tensed position.

This is what we create in the second key of the freeze.

You can even play with the Hip Roll and the head to give subtle movement during the freeze. And if you feel like it can be a good thing, you might even want to give the freeze a bit more duration to enjoy this calm moment.

Ease out - start and end
Ease out - start and end

Now, let’s add some more keys and see the magic happen.

b. In-Between

The arms movement is a bit straight. In the animation world, we call this kind of movement “Straight Ahead”, and this is usually not a nice thing to say about an animation, unless it is intended, of course!

So we will change this, and add a new key between the first one and the first main one. This is where we will add some arcs, which is a way to add some fluidity and appeal to your movements. To understand what an arc is in animation (as you seen in the 12 principles of animation at 1:23), imagine having a hat in the 16th century. When you see a lady, you take out your hat down to your hip with a little head salute, and put it back on. This is a “Straight Ahead” movement, more or less. With arc, this can transform into a huge Cyrano’s style reverence with some stylish circles or the arms. This is basically the same movement, but the visual sensation is totally different.

Notice that this example will also help you understand the overlap notion (in the next section).

But let’s go back to our Show Tablet animation.

Go to the frame 12, which will be around the middle of the empty space between the frame 1 and your first key. On the 3D view, if you click on one of the arms, the inspector will appear again. If you hold Shift+click/drag a slider, you will be able to modify the position of both of the arms, but you can move one after another if you prefer. Remember to give it a little asymmetry after you moved them both!

Knowing this, try to reproduce this kind of pose :

Add an arc to initiate the movement
Add an arc to initiate the movement

In this picture, the shoulder pitches are raised, the fingers are closed and the elbow yaws are more opened, but you can modify this position and play the animation as much as you want until you have something that fancy you.

Using the same principle, you can click on the frame 35, and close the shoulder rolls, raise the elbow yaws, close the elbow rolls and close the fingers. That way, the way the robot will go back in its Stand pose in the end will be smoother.

Again, for inspiration, you can look at the picture below.

Add an arc to finish the movement
Add an arc to finish the movement

3. Methodology - Step 3

a. Overlapping

The overlap is important to give some overall fluidity and expression to your movement. This is the main part of the very base of the animation process : Anticipation-Action-Reaction or Overlap and Follow through.

When you do a movement, even if it’s a straight arm reach to grab something, your body anticipates it by mobilising some torso muscles to keep your balance. Then comes the proper action and your arm rise in the air to grab the stuff you were reaching for.

The reaction will be your body stopping the inertia created by your movement.

Let’s be clear. If you just imagine yourself grabbing the TV remote control, the concept might be a little blurry. But if you imagine jumping in the air, you’ll have a big anticipation (you go nearly crouched), an action (you extend your legs, pushing on the ground, and elevating in the air, raising your arms high above your head) and the reaction (your arms go down again, your legs bend a bit, your head starts looking at the ground to see where you’ll land, …). Another example could be a basic run in a cartoon. The character starts by compressing himself in a weird position (anticipation), starts running so fast (action), that his head has a second delay on his foot (reaction).

In our animation, we’ll think about what is leading the body. This anticipation will be the head going down first to guide the look of the user. So grab the head keys on your timeline (except the very first one because the first key is the “safe pose”), and move them 2 or 3 frames to the left to make them move before the rest. This way, the robot will guide the user to look at the tablet, and go back to look at him so that when the user is done he can catch the robot’s gaze again.

Head first to lead the way
Head first to lead the way

As a reaction, we’ll create a delay on the fingers, because we want some nice and smooth finger movements. The robot is not nervous and angry, so its hands are relaxed. To do so, open the arms by clicking on the little arrow near their name in the timeline and select the finger keys (except the very first one, again) and drag them to the right, about 3 frames again.

Fingers go last to overlap
Fingers go last to overlap

For the same reasons, you can grab the elbow yaws and rolls (not the first one, remember!) in about the same position. If you have trouble reading the names on the left column, you can adjust the width of it by dragging the separation bar between the list and the frame 1.

Elbows are late to smooth the movement
Elbows are late to smooth the movement

b. Desynchronization

Only one more step!

You can close the arms in the timeline to have a bit more visibility. To create some natural feeling, we will desynchronize the two arms, because in reality, you’re never perfectly synchronized and symmetric unless you really want to be. So select every right arm frame (as always without the very first one), and push them 2 frames to the right.

Desynchonization between the two arms
Desynchonization between the two arms

If you hit play, you won’t really see what happened here, but the overall feeling will be way better.

3. Sounds and wheels

Now that the animation is complete, you might want to add some sounds or wheels movement to it. This is something that is not possible to do on your own as an animator. You have to ask for a developer to integrate it into an application. But you have to let him know when you want those things to happen.

As a developer, you would have to deal with **labels **to integrate extra animations requested by the animation team, like sound or wheels effects.

In the newly made animation, let’s say we want an image on the tablet right when the robot shows it.

In the last window, at the bottom of the screen, you can see another timeline. This is the label window we have seen in the overview part.

If you select a frame (for our example, let’s say around the 25th one) and right click on this label timeline, you can “Add a label”. Now you can give it a name by clicking on the “Label” label and type in what you want.

Add a new label
Add a new label

Name it “image : star.jpg”.
Name it 'image : star.jpg.'

This way, when the developer will receive your animation, you can warn him that there is a label in your animation and give him the name and function, so that in the integration code, he can do the right things to synchronize the image!

4. General thoughts

As you have seen, animations are made using stepped method. Each of them are really important and help you getting to the next one easily and smoothly.

Animation is best done through trial and error, and all the examples presented throughout this lesson are only meant to give you an overview of what is possible, not to say that this is what should always be done. Remember that animation is not easy, and the best way to go is by trial and error: try different options, test a lot, and don’t give up!

When users see the robot for the first time, they are intrigued by the shape, and amazed by the movements. That’s why animation is a really important part of the overall process and contribute a lot to the global experience your user will have with the robot.

If you plan to build a team to develop robotic application, you should definitely consider having an animator in it to be sure the code you’ll create will be well illustrated and served to the future users.