Basics of JavaScript for Animation - HTML5 Animation with JavaScript - page 18

defining. The second optional argument is the canvas element that we'll draw to. You might find it
surprising that we can pass a function as an argument to another function before we have finished defining
it. Just keep in mind, by the time it is needed here as an argument, it has already been defined.
When we execute the drawFrame function, window.requestAnimationFrame queues the drawFrame
function to be run again at the next animation interval, which repeats this process. Because we keep
requesting that the function run again, we've chained together a loop. Therefore, any code we place in this
function is called again and again, allowing us to animate the canvas at discreet intervals.
To start the loop, after drawFrame has been defined, wrap the function in parentheses and immediately
invoke it. This is a more space-efficient—and arguably clearer—alternative to defining the function first,
then immediately invoking it on the following line.
Because requestAnimationFrame is a relatively new feature, browsers are still working on their own
implementations of it. Because you want your code to be cross-platform, here is a little code snippet that
you can use to normalize the function across multiple browsers:
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000/60);
});
}
This code tests whether the function window.requestAnimationFrame is defined, and if it's not, runs
through the known browser implementations and assigns that as the function. If it cannot find a browser-
specific version of the function, then it falls back to a JavaScript timer-based animation using setTimeout
at an interval of 60 frames a second.
Because this environment check is used in all of the examples, include it in the utils.js file to import into
our documents. This way, you can be sure the animation loop works across multiple browsers, keeping the
scripts uncluttered so we can concentrate on understanding the core ideas of each exercise.
JavaScript objects
In this topic, the focus is on the various principles and formulas needed to create animations with
JavaScript instead of teaching specific coding methodologies. As such, we won't create large framework
libraries or complex data structures; instead, we'll keep things as simple as possible.
The animation concepts you learn here can be incorporated into more advanced JavaScript projects;
however, the goal is not to hand you a collection of pre-built code for you to copy and paste, but to convey
an understanding of the principles that make each one work.
Because this topic is written using JavaScript, you need to know some of the main ideas of the language
to appreciate what's going on in the examples. Since the most important things in JavaScript are objects
and functions (which is just a special kind of object), we'll look at those first.