jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ 289 ] Chapter 10 The four custom shapes are drawn using a single master function that accepts a configuration object specifying the start point (passed to the moveTo() method), and the points that make up each sub-path (passed to the lineTo() methods). We then use the setTimeout JavaScript function to create each shape one after the other, using the object passed to the master function to specify the relevant points on the canvas to draw each shape. This is all the code we need, so when we run the page now we should see the animation of the flag being drawn. The code works in all browsers, including IE, but as I mentioned earlier, the performance does vary considerably between browsers, with Webkit and Opera browsers running smoothly and very quickly, Firefox somewhere in the middle, and IE crawling along almost intolerably slowly. Animating the is all about conditional if statements, intervals, and timeouts. As we saw, the code itself is quite straight-forward. We just need rather a lot of it in order to produce even simple animations. Pop quiz – animating the canvas 1. Why did we store each call to setInterval() in a variable? a. For performance reasons b. In order to clear the interval when appropriate c. Because of the closure created with the anonymous function as the first argument to the function d. So that we can pass arguments to the function called by the interval 2. In the first function, where we drew the blue rectangle, we set the width of the each time the rectMotion() function is called by the interval. Why? a. To make sure the was big enough to contain the rectangle as it grew b. To correct a bug in Internet Explorer c. To reset the state of the , ensuring there was only one rectangle at each point in the animation d. As a requirement for setting the fillStyle property Have a go hero – creating canvas animations Go back to the static version of the flag you drew of your home country (or the logo or image of your choice) and convert it so that the different parts of the flag are animated into existence.
Canvas Animations Creating a canvas game The best animations are those that are interactive and engage the user, and this is exactly how a game can be seen, as one continuous, user-driven animation. The power of the element is really highlighted when it is used to create games, as we'll see over the course of this section. We'll create a very basic clone of the arcade classic Space Invaders with a series of alien ships that slowly advance down the screen, and a user-controlled space ship at the bottom that can shoot the incoming aliens: Time for action – creating the initial page The initial page that we'll use for this example is similar to that used in the previous example, although this time we won't be supporting Microsoft's Internet Explorer so some of the initialization code isn't required. 1. Create a new page in your text editor that contains the following markup: A canvas and jQuery Game [ 290 ]
- Page 259 and 260: CSS3 Animations Calculating the sin
- Page 261 and 262: CSS3 Animations The filter property
- Page 263 and 264: CSS3 Animations If, like me, you th
- Page 265 and 266: CSS3 Animations } el.filters.item("
- Page 267 and 268: CSS3 Animations An unfortunate prob
- Page 269 and 270: CSS3 Animations The context of this
- Page 271 and 272: CSS3 Animations Time for action - i
- Page 273 and 274: CSS3 Animations The first variable
- Page 275 and 276: CSS3 Animations Time for action - a
- Page 277 and 278: Download from Wow! eBook CSS3 Anim
- Page 279 and 280: CSS3 Animations We also have to upd
- Page 281 and 282: CSS3 Animations flatMatrix[3] = fla
- Page 283 and 284: CSS3 Animations When updating the s
- Page 285 and 286: CSS3 Animations translate translate
- Page 287 and 288: Canvas Animations Subjects that we'
- Page 289 and 290: Canvas Animations We can set the co
- Page 291 and 292: Download from Wow! eBook Canvas An
- Page 293 and 294: Canvas Animations All imageData obj
- Page 295 and 296: Canvas Animations context.beginPath
- Page 297 and 298: Canvas Animations For the next part
- Page 299 and 300: Canvas Animations Time for action -
- Page 301 and 302: Canvas Animations 3. Save the new p
- Page 303 and 304: Canvas Animations Time for action -
- Page 305 and 306: Canvas Animations Once the rectangl
- Page 307 and 308: Canvas Animations We then define tw
- Page 309: Canvas Animations }, context.lineTo
- Page 313 and 314: Canvas Animations Time for action -
- Page 315 and 316: Canvas Animations What just happene
- Page 317 and 318: Canvas Animations What just happene
- Page 319 and 320: Canvas Animations aliens.splice(x,
- Page 321 and 322: Canvas Animations Pop quiz - creati
- Page 323 and 324: Download from Wow! eBook
- Page 325 and 326: Pop Quiz Answers Using fadeToggle()
- Page 327 and 328: Pop Quiz Answers Using slideToggle
- Page 329 and 330: Pop Quiz Answers Implementing the p
- Page 331 and 332: Pop Quiz Answers Animating the canv
- Page 333 and 334: show() or hide() method, triggering
- Page 335 and 336: cssHooks using 239 cssHooks feature
- Page 337 and 338: fading animations 20 flicker effect
- Page 339 and 340: proximity animations about 207 exte
- Page 341 and 342: scaleY 232 skew 232 skewX 232 skewY
- Page 343 and 344: jQuery 1.4 Reference Guide ISBN: 97
Canvas <strong>Animation</strong>s<br />
Creating a canvas game<br />
The best animations are those that are interactive and engage the user, and this is exactly<br />
how a game can be seen, as one continuous, user-driven animation. The power <strong>of</strong> the<br />
element is really highlighted when it is used to create games, as we'll see over<br />
the course <strong>of</strong> this section.<br />
We'll create a very basic clone <strong>of</strong> the arcade classic Space Invaders with a series <strong>of</strong> alien ships<br />
that slowly advance down the screen, and a user-controlled space ship at the bottom that<br />
can shoot the incoming aliens:<br />
Time for action – creating the initial page<br />
The initial page that we'll use for this example is similar to that used in the previous example,<br />
although this time we won't be supporting Micros<strong>of</strong>t's Internet Explorer so some <strong>of</strong> the<br />
initialization code isn't required.<br />
1. Create a new page in your text editor that contains the following markup:<br />
<br />
<br />
<br />
<br />
A canvas and <strong>jQuery</strong> Game<br />
<br />
<br />
[ 290 ]
Change language