Animation Basics

Alright so let's start animating. Before we do I would like to take a little time to go over some things that will help you understand the animation process a little better. If you have a firm grasp of these concepts your free to skip this lesson. Though a good brushing up never hurt anyone.


  • Understanding the fundamental principles behind animation and how it works
  • Understanding function returns and variables
  • Understanding IIFE (Imediatly Invoked Functional Expresion)

Animation Principles

I'm sure almost anyone who was a child at one point saw cartoons. If not then please tell me you have seen T.V. or a movie or something with visual media. Now that you have that have you ever wondered how it works? No matter what visual media you watch it all works on the same principles. Your body is facinating and your brain as a processing unit even more so. The human mind is so flexible that given enough information it will create new memories on it's own. Things that never happened as far as your brain is concerned it really did happen. In animation we use this fact to produce fluid motion. Your eyes in effect take still frame images of the world around you, snapshots if you will, then sends that information to the brain for processing. Your brain then ties them together and then fills in the gaps for what the information that it doesn't have. Because of this you can fool your brain. If you have ever seen one of these:

bird in the cage

then you know what I mean. This illusion uses your brain filling in the gaps in memory to create the illusion that the bird on one side of the disc is inside the cage on the other side. So long as the disc is rotating fast enough your brain will make up for the fact that it doesn't see every movment of the disc. The magic number is 12 FPS (frames per second). That is the minimum amount of information you need to recieve to make motion fluid. The max is unknown. It depends on where the visual information is coming from how clear and sharp the image is and a whole mess of other stuff. The Air Force at one point did a test in which they put a pilot in a dark room and flashed an aircraft at 1/200 of a second and the pilots were consistently able to identify the aircraft. So we don't really know what the upper limit is. At least 200 FPS? Now while the brain can work with 12 frames per second that doesn't mean you should set you animation that low. It is still likely to be very laggy. Most T.V.s opperate at about 30FPS. Most monitors refresh at anywhere about 60 through 72 FPS (which any more will be wasted as the monitor will not refresh fast enough). 30 FPS is usually about a good place to put things for good nice fluid motion. I created an interactive pen to give you an idea about how framerate affects our perception of motion. Play around with it and see how things change. Keep in mind that there are a lot of factors that can influence how we percieve fluid motion also if your monitor doesn't support a refresh rate higher than 60hz it is likely that a frame rate higher than 60 fps will not really be noticible.

Now that we understand that it is a clean jump to animation. As all it is is drawing an object in a different position each frame. In the above example the ball looks like it move because each time the loop function is called the balls position is updated the canvas is cleared the ball is redrawn and then the program waits and after a set time repeats this process over and over again as fast as it can. Film projectors work in the same way moving each frame of the movie over the light source at a set speed. Creating the illusion that the images are actually moving on the screen.

Working with functions and variables what you need to know

This is pretty easy. It's just going over one of the fun little quirks of javascript. What is the difference between this:

  function foo(){
    return baz;

  var bar = foo;

and this:

  function foo(){
    return baz;

  var bar = foo();

If you said the parenthasis you would be right but why is that so different I might want to bring it up? Well in our first example what I am doing is saving the named function foo to a variable. You might have seen something like this before:

// saving an anonymous function to a variable
var bar =  function(){
    return baz;
  // OR

// saving a named function to a variable  
var bar = function foo(){
    return baz;

These are all the same thing. You are saving a function to a variable. Though the named function saved to the variable would be more like our initial example as it is a named function save to a variable

The other function foo being saved to a variable

  var bar = foo();

is NOT saving the function to that variable. In this example we are saving the return of the function. This is an important distinction as you will see when we go over our requestAnimationFrame polyfill in the next section. In this second case bar does not equal our function it equals baz. This:


is the declared name of our function. saving it to a variable like bar creates a pointer to our function. This:


is a function call. It is no different than saying;

When javascript reads your file when it goes to assign your variable it is calling the function before assigning it.

IIFE (Immediately Invoked Functional Expression)

IIFE are annonymous functions that will be called as soon as it is created. They are commonly read like this:

  return args;


  return args;

The moment that each of the above functions is created they will return the arguments passed to them. Yes I know this seems silly to return the arguments but the point was to give you the idea of what they look like. Here is a more relavant example:

  var bar = (function(){
  return foo + baz;
})(foo, baz);

As soon as that function is created it will immediatly call itself and return foo + baz. This is useful in a number of applications. It keeps the namespace clean and can be used in closures.

Well that is all for today. Next week we will be going into starting to animate. We will be going over requestAnimationFrame and why we should use it and create a simple animation with the shapes that we have learned to use. Hope to see you then!

2,125 0 0