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:
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.
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.
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.
If you want, check out my Flare file with the arc and position X animation added.
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.
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.
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.
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).
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.
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.
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.
At the top of the arc we want everything to go back to normal, so set rotation to 0 and scale to 1.
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.
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.
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.
As with the first bounce, at the top of the second bounce, we’re going to make everything normal.
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.
I’m going to give it just a tiny bit of squash as it hits the ground for the second time.
After the second bounce, we’re going to set everything back to normal since the ball is moving too slow 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:
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.
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!