smilguide.com

Animation is perhaps the most interesting feature in SMIL. Unfortunately, it's also the most complex. To truly understand the sandwich model of SMIL animation you need to know a good deal of math (mainly algebra, but also some trigonometry). Fortunately, software products such as Adobe GoLive have integrated SMIL support, so you don't really need to hand-code your animations. However, no matter what software you use to create animations, it is still helpful to understand how these animations work at the SMIL level.

This lesson will be dealing with rectilinear (straight-line) motion as defined by the BasicAnimation module. Animations using bezier curves can be creating using the SplineAnimation module (not covered here).

Animation Elements

Somewhat strangely, animation elements are nested within the media object element they will be animating. This may be caused by the recent shift in mindset towards Object-Oriented Programming. So—if it helps—think of SMIL animations less as orchestra conductors and more as individual sheet music.

The four basic animation elements are:

<animate>

This is used for creating simple animations, such as linear changes to an object's attributes.

<animateMotion>

This is the type of animation we usually think of when hearing the term animation. As you can guess, this is used for creating movement.

<animateColor>

Yes, color can be animated too! Imagine psychedelic and fade-in/out effects and you'll have the idea behind this element.

<set>

This is perhaps the most boring animation element. If the other animation elements are triangle and sine waves, this one is the square wave.

Each of these elements animates its parent object by manipulating that object's attributes. Imagine editing your SMIL file, saving it, and reloading it over and over very rapidly...that's roughly how these work in theory.

Animation Element Attributes

Animation elements manipulate media object element attributes, but they also have attributes of their own. First of all, all of the timing attributes you've learned up until now (begin, dur, repeatCount, etc) can be used in animations. Also, all animations share a base set of extra attributes, of which we'll look at just a few:

attributeName

Specifies which attribute of the parent element will be animated. This is the name on the left side of the equal sign (=): for example, the width in width="100%".

targetElement

This allows you to animate an element without directly embedding the animation element inside of it. This would be useful for animating a region, for example.

from, to, and by

These specify the target range of animation. You can think of these as the animation equivalents of begin, end, and dur respectively.

values

This allows you to use a list of values rather than a range. The syntax for this list of values is the same as that for a list of begin values: each value is separated by a semi-colon (;).

calcMode

Can be either "discrete", "linear", or "paced". A linear animation can have constant acceleration while a paced animation always has constant velocity, and a discrete animation has constant position (I use that last term loosely). Anyone familiar with the calculus should see a relationship between these.

There are some other interesting attributes, but let's get a basic understanding of these first. So which attributes of a media object does an animation animate? Well, that depends on the animation.

Animations can target not only XML-style attributes, but also others such as CSS.

Actually, animations can technically target any element, not just media objects. Animating animation elements themselves could lead to some very interesting effects which would be difficult to produce with a traditional animation sequencing program.

Generic Animations (<animate>)

The most basic animation is controlled by an animate. It is capable of animating any attribute which has a scalar or vector value. For our purposes here, let's say that it can animate any attribute which is a number.

Here is how you would shrink an image in a manner similar to when a television's cathode ray tube loses power:

<video src="television.mpg" alt="a television show" width="12cm" height="9cm">
  <animate attributeName="height" from="9cm" to="0cm" dur="2s"/>
</video>

Movement Animations (<animateMotion>)

Movements in the screen's Cartesian (x and y) plane are controlled by animateMotion. Animated motion is dependent on the underlying layout system which, unfortunately, the SMIL 2.0 recommendation does not say much about. animateMotion is unique in that it cannot have an attributeName attribute (as it can only target element positions).

Here is a theoretical animation for a falling image (a television being dropped out of a window):

<video src="television.mpg" alt="broken television">
  <animateMotion values="0,0; 0,9; 0,27; 0,54" calcMode="linear" dur="4s"/>
</video>

Color Animations (<animateColor>)

Color animations are also dependent on the underlying host language of the document. Since we've been using RGB values as found in HTML to this point, we'll stick with them here.

Here is an animation of a television screen fading to black:

<video src="television.mpg" alt="bright television">
  <animateColor to="#000000" dur="10s"/>
</video>

Animations Which Aren't Animations (<set>)

<set> is technically an animation because it can change values over time, but for all practical purposes it's mainly used to change the state of an element. As such, <set> has no from or by attributes. Setting a value in such a manner might be useful when you can't accomplish the same behavior with other techniques you've learned already.

Here is one way you could turn off the television image we've been playing with up until now (suddenly and without the dying-cathode-ray-tube effect):

<video src="television.mpg" alt="advertisements">
  <set attributeName="width" to="0" begin="5s" dur="indefinite"/>
  <set attributeName="height" to="0" begin="5s" dur="indefinite"/>
</video>

Using Multiple Animations

Obviously you can use more than one animation at a time in a SMIL presentation. But also—as you saw in the example from the last section—you can use more than one animation on a single element. This allows for more complex animations to be built out of simpler ones.

Here's a television in an earthquake:

<video src="television.mpg" alt="the news">
  <animateMotion values="0,0; 0,3; 0,0; 0,7; 0,0" dur="1s" repeatDur="indefinite"/>
  <animateMotion values="0,0; 4,0; 0,0" dur="2s" repeatDur="indefinite"/>
</video>

Complex Animated Scenes

To really use SMIL animation to its full potential requires a lot of study and experience. We have only begun to touch the surface, and I could write an entire tutorial on SMIL animation alone. For more information, take a look at chapter 3 of the SMIL 2.0 recommendation . In it you will find information about the sandwich model, additive and cumulative animations, interpolation, key frames, splines, etc.

Painting a SMIL (Example)

In  the section titled Painting with a SMIL I alluded to the possibility of painting with the <brush> element. Now I'll show you how to do that using animation. This will require using some things you haven't learned yet, but it will be a good experience for analyzing and comprehending SMIL presentations outside of tutorials and books.

Well, it would be great to create the entire animation using brushes and paths, but for the sake of simplicity I'll cheat a little bit here. Instead, I'll create the effect by animating regions. Also, instead of trying to create an animation using a spline or a curved path, I created a special image. Here is the necessary code:

<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language" xml:lang="en" title="Animated SMILe">
  <head>
    <layout>
      <topLayout width="320px" height="240px" backgroundColor="#000000">
        <region id="left-eye" width="0px" height="30px" top="50px" left="50px" fit="fill"/>
        <region id="right-eye" width="30px" height="0px" top="140px" left="50px" fit="fill"/>
        <region id="nose" width="0px" height="30px" top="100px" left="120px" fit="fill"/>
        <region id="mouth" width="49px" height="0px" top="25px" left="245px" fit="fill"/>
      </topLayout>
    </layout>
  </head>
  <body>
    <par>
      <brush color="#FFFFFF" region="left-eye"/>
      <brush color="#FFFFFF" region="right-eye"/>
      <brush color="#FFFFFF" region="nose"/>
      <img src="smile.png" alt="a SMILe" region="mouth"/>
      <animate targetElement="left-eye" attributeName="width" to="30px" dur="3s" fill="freeze"/>
      <animate targetElement="right-eye" attributeName="height" to="80px" dur="3s" fill="freeze"/>
      <animate targetElement="nose" attributeName="width" to="100px" dur="3s" fill="freeze"/>
      <animate targetElement="mouth" attributeName="height" to="190px" dur="3s" fill="freeze"/>
    </par>
  </body>
</smil>

Note that this example was not very elegant. Normally when working with SMIL animation you'll either use a special animation editor or a mixture of a special editor and some authoring by hand.

In the following screenshots you can see the animation in motion.

Test Your Understanding

1. Which element would you use if you needed to increase the duration of the following element gradually over time? <animation src="walk.svg" alt="a man walking his dog" dur="5s" repeatCount="indefinite"/>
   1. <animate>
   2. <animateMotion>
   3. <animateColor>
   4. <set>
2. True or False: Color animations can only go from lighter colors to darker colors.
3. What is wrong with the following code? <animation src="walk.svg" alt="a man walking his dog" dur="5s" repeatCount="indefinite">
  <animate attributeName="width" by="200%" attributeName="height" by="300%" dur="15s"/>
</animation>
4. Extra Credit: Explain why calcMode="linear" was used in the falling television example rather than the calcMode="paced" (the default)? (Hint: It has to do with the physics of falling.)