Page 6 —
Are You "Set" To Animate?
The <smil:animateColor> tag is nice if you just want to fade between or
loop colors, but what about making elements appear, disappear, or move
around?
Two important places to begin are the <smil:set> and
<smil:animate> tags. The <smil:set> tag sets an
attribute on a page element to a single value. Once the value has been set,
it won't change for the duration of the animation. This can be useful for
setting the visibility attribute of an element as "hidden" or "visible" when
the animation timeline starts. The <smil:animate> tag sets an
attribute on a page element to a range of values. Normally, you could use
this to change the size or position of an element from one size or place to
another size or place. The <smil:animate> tag also
automatically fills in all of the steps in between your start value and end
value, giving you a smooth, automatic animation.
The first example of our lesson shows a basic use for the
<smil:animate> tag. Review the example and have a look at
this code snippet:
<smil:animate targetElement="simplemouse" attributeName="width"
from="200" to="0" begin="0s" dur="3s" autoreverse="true" />
You can see that we're animating the element named "simplemouse," which is
the name of the box with the green background that holds the text "Click me
to shrink!" We are modifying the width of the box, shrinking it from 200 pixels
wide all the way down to 0 pixels over a duration of 3 seconds. Since the
autoreverse attribute is set to "true," the animation plays in reverse at the same speed once the animation is completed. The box shrinks and expands over a total of 6 seconds.
Simple enough right? In fact, you probably already figured that out on your own. So how about we take it up a notch and set our animations in motion? Let's look at how we can accomplish complex 2-D movement using the <smil:animateMotion> tag.
To send an object moving in a circle, an arc, or a zigzag on your page, all you need to do is define a path with the <smil:animateMotion> tag. The path statement we use in SMIL is derived from the SVG (Scalable Vector Graphics) notation. When building a path, we simply create a list of x,y screen coordinates to define the movement of the animated element. (If you slept through algebra, "x" is the horizontal coordinate and "y" is the vertical, and all coordinates are relative to a defined starting point). When the animation runs, the image, <div>, or object traces the path we've laid out.
Now take a look at this example and study the code:
Example 6: The Flying Green Inchworm
With SMIL, you aren't just limited to straight lines in horizontal or vertical motion — the path attribute can be used to make your objects dance in every direction and even swoop in circles!
next page»
|
