Frame Rates and HTML/JavaScript

by kirupa   |   8 July 2011

  Have questions? Discuss this HTML tutorial with others on the forums.

In the past, having smooth animations required using 3rd party libraries and frameworks such as Adobe's Flash. Today, as browsers across the board have gotten better, it is possible to create really smooth and tasteful animations/motion using just JavaScript. An important piece of making sure your animation is smooth is the frame rate. In this tutorial, we'll look into frame rates and how they can be applied to your JavaScript-based animations.

Frames and Rates

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.

Number of 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.

Frame Rate

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.

SetInterval

The function crucial to making animations in JavaScript possible is the setInterval function. This function is used to continuosly call another function with a slight pause between each call - a pause duration that you specify:

setInterval(function/code, pauseDuration);

Here is a visualization:

using the setInterval function

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:

pause equation

If you want to get a frame rate of 30, you would simply put 1000/30 as your setInterval's pause duration value:

setInterval(function/code, 1000/30);

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.

Conclusion

The frame rate is a crucial detail for you to be aware of when working with JavaScript-defined animations. Despite defining a frame rate that looks good, you need to test to make sure that your end result isn't a choppy animation on slower computers and devices.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!