jQuery 1.4 Animation Techniques - Index of

Canvas Animations
Once the rectangle is in the correct location we clear the interval and then call the next
function, (we'll add this shortly) passing in the context object. After the rectMotion()
function, we add a final variable that contains the ID of the interval which calls the function
to animate the rectangle. We use this variable to clear the interval once the animation
is complete.
If you run the page in a browser at this point, the blue rectangle appears to move into
the from the left before stopping in the middle. Next, we need to animate the
horizontal and diagonal white crosses over the blue rectangle.
Time for action – animating the white crosses
In this part of the animation, we'll draw a white line down the middle and across the center
of the rectangle, and then make the diagonal cross grow out from the center to the corners.
The following code should be added in between the canvas and init variables in the code
so far:
whiteLines = function(context) {
context.fillStyle = "#fff";
context.strokeStyle = "#fff";
context.lineWidth = 50;
var width = 0,
height = 0,
pos = {
ne: { x: 250, y: 150 },
se: { x: 250, y: 150 },
nw: { x: 250, y: 150 },
sw: { x: 250, y: 150 }
},
growDiagonal = function() {
if (pos.ne.x >= 50) {
context.beginPath();
context.moveTo(pos.ne.x, pos.ne.y);
context.lineTo(pos.ne.x - 4, pos.ne.y - 2);
context.moveTo(pos.se.x, pos.se.y);
context.lineTo(pos.se.x - 4, pos.se.y + 2);
context.moveTo(pos.nw.x, pos.nw.y);
context.lineTo(pos.nw.x + 4, pos.nw.y + 2);
context.moveTo(pos.sw.x, pos.sw.y);
context.lineTo(pos.sw.x + 4, pos.sw.y - 2);
context.stroke();
[ 284 ]