When you are dealing with motion, you are often working with frames. A frame is a snapshot of what you are currently depicting...such as a blue circle on a light gray background:
[ say "hi" to the blue circle ]
A single frame by itself does not really convey much. Get enough of these frames (with some slight changes in what you are depecting) and start cycling through them, and things get interesting:
The end result is an animation. There are two things that determine how well your animation works - the number of frames and how quickly you change these frames.
Creating the illusion of motion requires a transition between two points. How jerky or smooth the transition depends partly on how many intermdiate points you define. Let's say I have an example of a circle scaling and shifting over a period of time:
You have a starting point, an ending point, and a few intermediate points where the circle's scaling and shifting are defined. This entire animation is only five frames long. To contrast that, let's add more intermediate frames to define this animation:
This time around, more of your circle scaling and shifting is explicitly defined. There are around 20 frames that make up our animation this time.
Based on just what I've provided, which one would you think looks smoother when played back? This depends, as you will see in the next section, on the frame rate. If you were to ignore the frame rate for a moment, with both animations played back at the same frame rate, the one with more intermediate frames would look smoother because there are more points defined.
The next thing we will look at is the frame rate. The frame rate determines how many frames are played in a given second of time. This value is measured in frames per seconds or fps for short:
The higher your fps the faster your animation will proceed to completion because you are running through all of your frames at a faster pace. Likewise, the slower your fps, the slower your animation will proceed to completion.
The frame rate you will use determines largely on what you are creating. In general, I like to use 30 as a good number for the frames per second for the content that I create. This means that every second of animation requires 30 frames. If you are curious what common frates are for TV and movie content, check out the Frame Rate article on Wikipedia.
You can easily get away with great animations whose frame rates are either lower or higher than 24. The thing you need to keep in mind, especially when thinking about mobile phones and other low-power devices, is performance. A higher frame rate requires a user's processor to do more work to cycle through all of the visual information quickly. Having a high frame rate on simple content should not be a problem. Having a high frame rate on visually complex content may be a problem where your users may be viewing your content at a lower frame rate than what you would have preferred.
Here is a visualization:
The smaller your value for pause, the more frequently your setInterval will call the function you specified. Think of each time your function gets called being the equivalent of a frame being played. To rationalize our earlier frames per second logic with the pause milliseconds value, simply divide your desired frame rate into 1000:
If you want to get a frame rate of 30, you would simply put 1000/30 as your setInterval's pause duration value:
That's all there is to it. All of this may seem a bit disconnected without an example, so you can see two examples of the setInterval function at work in my Animations and the HTML5 Canvas and Animating Many Things on a Canvas tutorials.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.