Page 5 —
Color Transitions with smil:animateColor
The <smil:animateColor> tag is used to shift between one
color and another. As an added bonus, the SMIL spec also includes all of the
colors in between your starting point and your destination when the
animation runs. For instance, when animating a block of color from red
(#ff0000) to yellow (#ffff00), you'll see a few shades of orange somewhere
in the middle!
My second example, "The Colorful Mouseover," used the <animateColor> tag. Take a moment to review the example, and then we'll dig into what <animateColor> can do.
Now let's dissect a snippet of our SMIL code from the mouseover example so we can see how a simple animation is built from the different elements:
<smil:animateColor targetElement="colormouse"
attributeName="background-color"
values="#ff0000;#0000ff" begin="0s" dur="1.5s" autoreverse="true" />
As you can see, we begin with the smil:animateColor tag. This lets the browser know what we'll be doing. In this case, we're dealing with a simple color animation.
Next comes targetElement="colormouse". This is the element we're going to animate. In example two, "colormouse" was the id name given to the <div> where the mouseover occurs.
Third is attributeName="background-color". This is where we decide which CSS attribute we'll be messing with. In example two, we're animating the background color of the "colormouse" <div>. The <div> in the example is defined as a 200-pixel by 50-pixle rectangle, so the color animation will take place within that box. There are a number of possibilities here — we could animate the text color, background color, or border color, among other choices. Basically, any page element that can be given a color in your
CSS declarations is susceptible to manipulation by the smil:animateColor tag! Consult the CSS1 and CSS2 documentation
for spec information about cascading stylesheets, and be sure to give
Taylor's DHTML Tutorial another
run-through for all sorts of CSS positioning magic.
The next bit of our code is values="#ff0000;#0000ff". This tells the browser to animate from the first value (#ff0000 - red) to the last value (#0000ff - blue), and all colors in between, during the allotted time set by the dur declaration. Notice how the different colors are separated by semicolons. Again, the possibilities here are numerous. You can use multiple values like this ...
values="#ff0000;#00ff00;#ffffff;#000000"
... which would start the animation at red, then change it to blue, brighten it to white, and then everything fades to black. You aren't limited to just specifying RGB values in HEX either, values="blue;red" would work just as fine.
Lastly, you'll see autoreverse set to a value of "true". With this value active, the animation will reach the end then immediately replay in reverse. If you look at the color values, you'll notice that the code only asks for a color change from red to blue, yet the animation runs from red to blue, and then back to red. If the autoreverse command was absent or set to "false", the animation would end when the color changed to blue. Also note that the animation is set to run for a duration of one second (dur="1s"). However, with autoreverse turned on, the animation lasts two seconds — it takes the same amount of time to play backward as it does forward.
Now that you've got a solid grasp on how to build a SMIL timeline and how to animate colors, you can put the two techniques together, add some more CSS wizardry, and show off a little flashy funk at your next party.
Example 5: Happy Hour at the
Black & Blue Bar
OK, enough with this changing colors bull-honkey, right? Do you want to
learn how to make your page elements fly around on the screen? Well, head on
to the next page where we'll cover 1-D and 2-D animations.
next page»
|
