intro to RAF - request animation frame

raf ( elapsed-time )

Description

Animation programming involves a clock or a timer. RAF is an html5 upgraded replacement tool for timing. Pre html5 timing tools are SetInterval or SetTimeout functions. With SetInterval and SetTimeout you supply the time interval. You must be careful not to supply a framerate faster than your computer can handle. With RAF that is not a problem because it runs as fast as it can by default. RAF supplies you with the time interval. You do not have to figuring out the maximum speed setting or worry about overclocking.

When you supply the time interval to SetInterval or SetTimeout, there will be a margin of error on a frame by frame basis. For high precision calculations of time sensitive operations, you will want to calculate that margin of error on each frame. You must also time the framerate yourself. You set a frame rate time interval and then calculate the actual time interval between frames. The margin of error would be that difference between request time interval and the actual time interval. With RAF, you do not set a time interval, you start the animation programming given a time interval that varies.

Audience

You are a web programmer interested in gaining insight into programming animations from scratch.

Demo - set timeout

Let's see the elapsed time or dt(delta time) argument; this.tick( dt ).

demo in it's own page: ./elapsed-time

raf Timer file link: ./elapsed-time/Timer.js

js file link: ./elapsed-time/demo-elapsed-time.js

Videos play at rates of 24 to 30 fps which is more than fast enough for any human's perception. At 30ms or 0.03 seconds elapsed time between frames, we have a video framerate of 1/0.03 = 33.3 fps. That is more than fast enough. We will work more with this time difference dt(delta time) argument in a subsequent article about "tweening" Here will will just print it out.

Summary

RAF proved to be a great innovation by way of providing us with a time difference argument and running as fast as possible making the browser a more viable option for playing high definition video and video games.

Final Notes

This script works on all browsers as far back as IE9.