Animation 101

Before we jump into the deep end, let’s take a few steps back and talk about what an animation is. At its most basic level, an animation is nothing more than a visualization of change - a change that occurs over a period of time.

Let’s look at that in more detail.

The Start and End States

If visualizing change is an important part of an animation, we need to create some reference points so that we can compare what has changed. Let’s call these reference points the start state and the end state. To better explain what is going on, let’s come up with an easy-to-understand example as well.

Let’s say our start state looks as follows:

You start off with a blue circle that is small and located to the left of the screen. At the end state, your blue circle now looks sorta kinda like this:

Based just on the information you have on what our blue circle looks like in the start and end states, what can you tell is different?

One change is the position. Our blue circle starts off on the left side of the screen. It ends up on the right hand side. Another change is the size. Our circle goes from being small to being much larger.

How do we make an animation out of this? If we were to just play the start and end states repeatedly, what you would see is something that just bounces from left to right very awkwardly. That is pretty turrible. Just turrible. What we need is a way to smooth things out between the start and end states. What we need is a healthy dose of what is known as interpolation.

Interpolation

Right now, what we have are two discrete states in time. At the beginning, you have your start state. And the end, you have the end state. If you were to play this back, this wouldn’t be an animation…at least, not a very good one. In order to make an animation out of what we have, we need a smooth transition that creates all the intermediate states. This creation of the intermediate states is known as interpolation.

This interpolation, which occurs over a period of time that you specify, would look similar to the following diagram:

You may be wondering who specifies the interpolated states. The answer, which you should brace yourself for, is you! When creating animations on the canvas, you will need to specify the starting state, the ending state, the duration, and the intermediate states. Once you have all of these things, you have an animation! Now, I know this seems like a lot to deal with and process, but it isn’t too bad as you will see shortly.