jQuery 1.4 Animation Techniques - Index of

var context = canvas.getContext("2d");
init(context);
}
} else {
var context = canvas.getContext("2d");
init(context);
}
})();
[ 283 ]
Chapter 10
What just happened?
In the previous examples in this chapter all of our variables were global, which is generally
a bad practice when coding for the real world. In this example our code is within the scope
of the anonymous function, so the variables are only accessible within that function and are
therefore not considered global.
We also use the same construct for detecting and working with IE that we did before,
where we define an inline function that is either called straight away for most browsers,
or once the onload event of the body is fired for IE. The function that is called is init()
in this example.
Within this function we declare width and pos variables and then define another inline
function called rectMotion(), which will be called repeatedly by an interval. Any shapes
drawn outside of the bounds of the do not exist, so we can't draw a rectangle
out of view and then animate it into view. Instead, we gradually build up the rectangle by
starting at the left edge and incrementally widening the rectangle until it is the correct width.
This is done using the first branch of the if statement, which will be executed while the
width variable is less than 400. To speed the animation up, we actually increase the
width of the rectangle by two pixels at a time (although the speed of the animation is also
considerably different between browsers) by increasing the width variable and then using
the variable as the width argument in the fillRect() method.
Once the width variable has reached 400, we then change over to use the pos variable
instead. In this part of the conditional, we increase the pos variable by two (the rectangle
will appear to move two pixels at a time, again for speed), reset the by setting
its width, and set the fillStyle property. We then draw the new rectangle, using the pos
variable as the argument for the x axis position.
It will look as if the rectangle is being moved to the right, but this is not the case at all. We
are actually destroying the rectangle and then drawing a completely new one two pixels to
the right of the original.