jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
The properties we can set on text include: Property Usage font Sets the size and the font-family of the text. [ 271 ] Chapter 10 textAlign Sets the alignment of the text. Can be either start (the default), end, left, right, or center. textBaseline Sets the baseline of the text. Can be either alphabetic (the default), top, hanging, middle, ideographic, or bottom. Transformation methods The can have the same transforms applied to it that we saw in the last chapter, which can be applied using the following methods: Method Usage rotate(a) Rotates a shape by the specified number of radians. scale(a, b) Scales a shape along each axis by the specified amount, with a being the x axis and b the y axis. translate(a, b) Translates the shape along each axis by the specified amount, with a being the x axis and b the y axis. transform(a, b, c, d, e, f) The transform() method is equivalent to the matrix transform form function and can be used in the same way to scale, translate, and/or skew the shape. Pixel manipulation The even allows us to work directly with the pixels in the canvas and can retrieve shapes as imageData objects, or create shapes directly by manipulating the at pixel-level. We have the following methods for manipulating pixels: Method Usage createImageData(a, b) Creates a new, blank imageData object using the supplied arguments as width and height properties. This method can also be passed another imageData object, which will cause the method to return an (empty) imageData object the same width and height as the original. getImageData(a, b, c, d) Returns an imageData object containing the pixel data for the specified area of the . Arguments a and b are the start coordinates of the area, c and d are the width and height. putImageData(a, b, c) Paints the pixel data to the . The first argument is the imageData object to use, the second and third are the start coordinates of the resulting shape.
Canvas Animations All imageData objects, either those we get from the , or those we create with the createImageDate() method have several properties we can make use of, including: Property Usage data This property is a CanvasPixelArray, and is read-only when we get an imageData object from the . We can also use it to set pixel data in an imageData object we create. The array contains four items per-pixel: the r, g, and b values for the pixel, and the alpha. height The height of the image represented by the imageData object. This property is read-only. length The length of the CanvasPixelArray in bytes. This property is read-only. width The width of the image represented by the imageData object. This property is read-only. Drawing to the canvas Drawing to the programmatically is very straight forward in theory. The methods and properties are easy to use, and are quite consistent between supporting browsers. Direct pixel manipulation is the trickiest part of the API to master, but other than that there is nothing really complicated. One thing we do find is that our code can very quickly mount up. As soon as we're drawing multiple, complex shapes, and setting various properties, our code can easily run to a few hundred lines or more even for relatively simple drawings. This is especially true when animating the contents of the . Time for action – drawing to the canvas Let's take a look at a quick example of drawing a non-animated shape. We don't even need jQuery for this. 1. Add the element to the of our template file: Your browser doesn't support the canvas element! [ 272 ]
- Page 242 and 243: 2. Save the new page as marquee.htm
- Page 244 and 245: [ 223 ] Chapter 8 1. jQuery provide
- Page 246 and 247: clear:both; } div#fadeLeft, div#fad
- Page 248 and 249: Time for action - animating the pos
- Page 250: 2. In this example we used the dele
- Page 253 and 254: CSS3 Animations The following trans
- Page 255 and 256: CSS3 Animations Units It is of crit
- Page 257 and 258: CSS3 Animations Skew Remember the t
- 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: Download from Wow! eBook Canvas An
- 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 and 310: Canvas Animations }, context.lineTo
- Page 311 and 312: Canvas Animations Creating a canvas
- 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
Canvas <strong>Animation</strong>s<br />
All imageData objects, either those we get from the , or those we create with the<br />
createImageDate() method have several properties we can make use <strong>of</strong>, including:<br />
Property Usage<br />
data This property is a CanvasPixelArray, and is read-only when<br />
we get an imageData object from the . We can also<br />
use it to set pixel data in an imageData object we create. The<br />
array contains four items per-pixel: the r, g, and b values for<br />
the pixel, and the alpha.<br />
height The height <strong>of</strong> the image represented by the imageData<br />
object. This property is read-only.<br />
length The length <strong>of</strong> the CanvasPixelArray in bytes. This<br />
property is read-only.<br />
width The width <strong>of</strong> the image represented by the imageData object.<br />
This property is read-only.<br />
Drawing to the canvas<br />
Drawing to the programmatically is very straight forward in theory. The methods<br />
and properties are easy to use, and are quite consistent between supporting browsers.<br />
Direct pixel manipulation is the trickiest part <strong>of</strong> the API to master, but other than that there<br />
is nothing really complicated.<br />
One thing we do find is that our code can very quickly mount up. As soon as we're drawing<br />
multiple, complex shapes, and setting various properties, our code can easily run to a few<br />
hundred lines or more even for relatively simple drawings. This is especially true when<br />
animating the contents <strong>of</strong> the .<br />
Time for action – drawing to the canvas<br />
Let's take a look at a quick example <strong>of</strong> drawing a non-animated shape. We don't even need<br />
<strong>jQuery</strong> for this.<br />
1. Add the element to the <strong>of</strong> our template file:<br />
<br />
Your browser doesn't support the canvas element!<br />
<br />
[ 272 ]
Change language