Using the Principles of Animation in Flare to Animate a Bouncing Ball (Part 2)

In the first part of this tutorial, we created a basic ball bounce animation in Flare using some of the basic principles of animation like timing, spacing, easing, mass, and weight. We’re now going to make the animation look a lot better by adding arcs, anticipation, squash, and stretch.

This is what our final animation is going to look like:

Bouncing ball with arcs, anticipation, squash, and stretch. Preview my final file here.

Arcs

In nature, objects tend to move in arcs. Using arcs effectively can make animations look pleasing and natural. Anthony Wong, of Pixar Animation Studios, has a great article on arcs. Also, don’t miss the video in the first part of this tutorial on Disney’s 12 principles of animation, which covers arcs.

In our case, we want our bouncing ball to follow an arc. This is surprisingly simple to achieve and doesn’t involve drawing a bunch of curved paths for our ball to follow (as you might initially be tempted to try).

To make our ball follow an arc, all we have to do is animate our position X at a constant speed. The easing that we previously gave our position Y (in part 1) naturally creates an arc.

Start by adding a key for position X at the start of the animation. Then move the playhead just a bit past the end of your bounce and move the ball node along its X axis to set another key.

Make the ball move horizontally by adding two keys for position X.

Let’s add just a subtle ease-out to our first position X key, so the ball slows down naturally as it approaches the last key. We don’t want this to be too exaggerated; otherwise, it will look like our ball is slowing down in the air. We want just the final moments of friction on the ground to slow it down.

Select the first position X key and give it a subtle ease-out.

Here’s how the animation looks now:

Check out what happens if I overlap every third frame of the animation. We get a very natural arc, and all we had to do was animate our X position with two keys.

Overlapping every third frame reveals the arc trajectory we created.

If you want, check out my Flare file with the arc and position X animation added.

Anticipation

Right now our ball suddenly springs to life. If you’d blink, you’d totally miss the start. We need to add some anticipation to help cue the viewer that something is about to happen. Anticipation also adds some personality to our ball, giving it life as it pushes itself into motion.

First, we need to add some extra space at the start of our timeline. Marquee-select all the keys and move them to the right. This gives us some space to create the anticipation.

Create some space for the anticipation.

Now add a key for position X at the very start. We want this to be the same as the current first key, so you can either copy and paste it, or just hit the key button next to position X. Then add a second key that moves the ball back just slightly.

Make your ball slightly roll back before it jumps.

Add some easing to make the movement of the ball smooth. To do this, I gave some ease-in and ease-out on my first key (with a slightly exaggerated out) and an exaggerated ease-in on the second key. Don’t add any ease-out to this key. Otherwise, your ball will have an abrupt stop right before the action. We want this whole sequence to feel like a smooth build-up to the main action, no interruptions. You might want to play with the timing/position of your second key to get the right feeling. You can see I moved mine over a bit.

These are the settings I used for my interpolation on the two anticipation keys.

Here’s how the animation looks with anticipation:

Grab my Flare file here.

Squash and Stretch

Squash and stretch help your objects feel like they’re made of some real substance. Organic and flexible objects will require more squash and stretch, while stiffer objects will have less. Adding a bit of squash and stretch can help your animations look more lifelike while adding style and personality. Here’s a good article on squash and stretch from Chris Hurt of Industrial Light & Magic.

I’m going to create a key for rotation, scale X, and scale Y at the very start of our animation. These are all going to be the default values (0 rotation, 1 scale X, and 1 scale Y).

Add keys at the start for rotation and scale.

Next, we’re going to go to the second key, where our anticipation happens. Rotate the ball back a bit and increase the scale X while decreasing scale Y.

Since we want our ball to look realistic, we’re going to want it to conserve its mass (thanks, Newton). That means that if we squash it in one direction, we’ll want to stretch it in the other, so it keeps a relatively similar volume.

If you squash in one direction, make sure you stretch in the other to conserve mass.

Let’s move to the third key. Note that you can quickly jump to your existing keys with the comma (,) and period (.) shortcuts.

On this key, we want to rotate our ball slightly forward, in the direction it’s about to jump. We’ll also set the scale back to 1.

Rotate the ball in the direction it’s about to jump.

Now move one key forward (Cmd + Right Arrow Key) where the ball has just left the floor. This is when the ball is traveling the fastest, so we’re going to give it a big stretch in Y (and squash in X). I’m also going to rotate it a tad more, so it continues to follow the trajectory of the arc.

This is the fastest point of the jump, so we want to exaggerate the squash and stretch.

At the top of the arc we want everything to go back to normal, so set rotation to 0 and scale to 1.

Everything goes back to normal at the top of the arc.

The next key we want to add is just one frame before the ball touches the floor. Again, this is the fastest moment in the arc, so we’re going to apply the same exaggerated stretch in Y we did before. This time, however, we’re going to rotate the ball backward, still following the direction of the arc.

Same thing we did on the way up, but on the way down.

The next frame is the first time the ball touches the ground after being in the air, so we want it to be pretty squashed. We’re going to set rotation to 0 as its perfectly in between the first and second arc.

First time the ball touches the ground after its first big jump, so it needs to be squashed.

Now we’re going to repeat what we did for the first step, making the squash and stretch more subtle as the ball is moving slower with each bounce. So the first frame off the ground in the second jump has much less stretch and less rotation too.

First frame off the ground in the second bounce.

As with the first bounce, at the top of the second bounce, we’re going to make everything normal.

Normal rotation and scale at the top of the second bounce

For the frame right before the ball touches the ground for the second time, again, reverse the rotation and give it a bit of stretch.

Frame before the ball touches the ground the second time.

I’m going to give it just a tiny bit of squash as it hits the ground for the second time.

Just a small amount of squash on the second bounce.

After the second bounce, we’re going to set everything back to normal since the ball is moving too slow at this point.

Set rotation and scale back to normal, as the ball is moving too slow to squash and stretch at this point.

As a final step, you want to go through and apply the same easing to your rotation, squash, and stretch keys as you did with your translation keys. For example, you want your rotation and scale keys to have the same ease-in and ease-out that your first anticipation key has:

Give your first rotation and scale keys the same interpolation as your anticipation.

Go through and do this for the other keys. Remember, you want your ball to ease-out when it’s approaching the top of the arc (so it feels like it’s hanging onto those keys a tad longer) and you want it to ease-in when it’s about to hit the floor.

Make your rotation and scale keys ease-out as they approach the top of the arc.

Check out my final Flare file if you want to see all the exact timing and interpolation settings I used.

That’s it for our bouncing ball tutorial! We’re going to be doing more of these to cover more principles, like follow through and secondary motion. That said, you should be able to apply all the principles you learned here to most of your animations!