Page 3 —
Timelines, Running through My Mind
By now you can tell that SMIL depends heavily on the element of time to keep things running smoothly. In the following section, we'll pick apart the timeline and see how to run our elements in loops, one after another, in parallel, or simultaneously using independent timelines.
What's a Timeline?
A timeline represents the amount time that an element takes to run, from
beginning to end. For instance, we could say that the timeline for the
evening news would be from 5:00 PM until 5:30 PM, or 30 minutes long,
starting at 5:00 PM. Also, a timeline could be started by an event or
instruction — I order a pizza because I'm hungry, not because it is 5:53
PM.
To run a timeline, we need a timeline container. A timeline container is to SMIL what a <div> is to HTML — a useful way of grouping elements together so they don't affect other elements on the page. Timeline containers come in three flavors:
- <smil:par> for animations which run in parallel, or all
the same time
- <smil:seq> for animations that run in sequence, or one
after another
- <smil:excl> for exclusive elements, or animations, which
pause all other timelines when they run
If you are only animating a single element within a timeline, you can use <smil:par> or <smil:seq> interchangeably.
When we construct a SMIL timeline, we always begin, appropriately enough, with the begin attribute. If we don't set up a begin attribute in an animation, it's assumed that the animation will run as soon as the parent starts — for time containers, that's as soon as the Web page is loaded.
The most common values assigned to the begin attribute are integers between 0:00 and infinity, which represent seconds, minutes, and hours. For seconds, add an "s" to the end of the number (begin="36s"), for minutes add "min" (begin="60min"), and for hours, add an "h" (begin="1h"). It's also possible to combine time values in the standard time format that is used on digital clocks. For example, 1 hour, 10 minutes, and 20.5 seconds would be coded as "1:10:20.5", and 3 minutes and 2 seconds would be "3:02".
Another way to trigger the beginning of a SMIL animation is to associate the begin attribute with a user action. For example, you can program an animation to play when the user moves her mouse over the SMIL element by using begin="star.mouseover". You can also combine user actions with time parameters like this: begin="star.mouseover+2s".
Here are some common uses and examples of the begin attribute:
| begin="0" |
Start the timeline as soon as the page (or the timeline's parent) is
fully loaded. |
| begin="5" |
Start the timeline after 5 seconds (values are expressed in seconds by
default). |
| begin="5s" |
Another way of expressing the above, in this instance with seconds
declared. |
| begin="1:30" |
Start at 1 minute, 30 seconds. |
| begin="1:30:1" |
Start at 1 hour, 30 minutes, 1 second. |
| begin="0.5" |
Start after 0.5 seconds. |
| begin="500ms" |
Start after 500 milliseconds (the same as 0.5 seconds). |
| begin="myDiv.click" |
Start as soon as the element named "myDiv" is clicked with the
mouse. |
| begin="myDiv.click+2s" |
Start 2 seconds after the element named myDiv is clicked with the
mouse. |
But wait! There's more! We're not quite through with timelines just yet. Sure, we know how to start them, but what about stopping them? Click ahead for this rather important discussion, followed by a bit of dynamic SMIL timeline knowhow.
next page»
|
