jQuery 1.4 Animation Techniques - Index of

Canvas Animations
We then define two inline functions, one to create the vertical cross and the other to create
the diagonal cross. The growVertical() function is called first with an interval and we
just draw one white rectangle from top to bottom, and one from left to right in the center of
the background using the width and height variables to repeat the interval as many times
as necessary. The interval is cleared once the rectangles are the correct size and then the
growDiagonal() function is called with another interval.
In this function we need to draw four lines, each starting in the middle of the vertical cross.
We use the different properties in our pos object to do this. Each time the function is
executed, we move to the x and y positions specified for each line in the object and then
draw towards the relevant corner. We then update the properties in the object ready for the
next iteration of the function.
The properties each need to be updated by different amounts, for example, the line moving
from the center to the top-left of the rectangle need to move negatively along both the x and
y axes, whereas the line to move to the top-right corner needs to move positively along the
x axis, but negatively along the y axis. We use a new path on each iteration of the function to
preserve the anti-aliasing of the lines.
Once the lines are drawn we clear the interval and call the next function. We'll define
this function now. It should be placed after the canvas variable, but directly before the
whiteLines() function that we just added.
Time for action – animating the red crosses
All we need to do now is draw the vertical red cross and the four custom red shapes. Add the
following code in between the rectInt variable declaration near the top of the
and the whiteLines function we defined in the previous section:
redCross = function(context) {
context.fillStyle = "#C00";
context.strokeStyle = "#C00";
context.lineWidth = 30;
var width = 0,
height = 0,
pos = {
up : { x: 250, y: 150 },
down : { x: 250, y: 150 },
left: { x: 250, y: 150 },
right: { x: 250, y: 150 }
},
addStripes = function() {
[ 286 ]