Page 4 —
Timeline Duration
Starting a SMIL animation is easy enough. Luckily for us, it's just as easy to stop one. By using the end and dur attributes, we can define an event that will stop the animation, or we can give the animation a set length of time to run, after which it will stop.
The end attribute defines when the animation will end (what else did you expect?). The end attribute can be given a value of seconds like "6s" or an event like bigbutton.click, which would stop the animation when the element named bigbutton was clicked with the mouse.
The dur attribute defines how long the animation will run. The dur attribute can't use an event in the way that end can. In fact, you can't normally use dur and end together, unless dur is an amount of time and end is an event. In that case, the animation would run until the time defined by dur runs out, or until the event defined by end occurs, whichever happens first.
Another Fun Example
Forgive me for jumping ahead, but I'd like to show you how complex and powerful SMIL timelines can be if you care to fully exploit SMIL 2.0's bag of tricks. In the following example, I've created three animated elements (which each live on their own <div>) on three separate timelines. The first element runs quickly, and then slows down, the second element runs at a constant pace, and the third element starts off slowly but then speeds up at the end. I've used the <smil:par> tag so that all three timelines run at the same time.
Example 4: The Race
Take a look at the code for the timelines. You'll notice that I've used the keysplines and keytimes attributes to control the speed of the animations. These terms will be familiar to you if you've ever built animations in Flash. The tricks behind keysplines and keytimes are a bit too advanced for this tutorial, but if you're really interested, I invite you to study the spec for the attributes. Also, have a look at some additional examples for inspiration.
Now that we've nailed down timelines and learned how they work, let's move on to the various uses of the <smil:animate> tag.
next page»
|
