Mark Hopkins
Microsoft Corporation
December 2000
Summary: This article introduces you to the basics of HTML+TIME animation, so that you can create an exciting Web experience for your users. (10 printed pages)
Contents
Introduction
Prerequisites
Declarative Animation
Animating Properties
Animation Elements
Specifying Animation Values
keyTimes and keySplines Attributes
For More Information
Adding animation to Web pages was one of the great promises of Web-based programming languages like Microsoft® Visual Basic® Scripting Edition (VBScript) and Microsoft® JScript®. However, unless you were already familiar with programming languages like Visual Basic, C++, or Java, you probably had a steep learning curve ahead of you.
Well, here's some good news—adding animation to a Web page has never been easier. Microsoft® Internet Explorer 5.5 implements the W3C SMIL 2.0 Working Draft animation module through the time2 behavior of HTML+TIME. This article introduces you to the basics of HTML+TIME animation so that you can create an exciting Web experience for your users.
This article assumes you know how to use DHTML behaviors, specifically, the time2 behavior of HTML+TIME. This article doesn't go into great detail on how to add a behavior to your page. Nor does it cover how to declare a namespace and use custom tags, as required by the time2 behavior. These topics are covered in the HTML+TIME Overview and Spice Up Your Web Pages with HTML+TIME.
The beauty of HTML+TIME animation is that it uses simple attribute values on elements. Anyone who is comfortable using HTML elements to create Web pages should be able to use these animation features. The best part is that you won't need to use a programming or scripting language. However, most aspects of HTML+TIME are scriptable if you would like to use script to make a more elaborate page.
This ad banner is a simple example of some of the things you can do with HTML+TIME animation. The code in this sample will be used to demonstrate some of the elements and attributes covered in this article.
Of course, animation can be much more complicated than this. Here is a list of some of the basic things you can do with HTML+TIME animation.
When you start combining these activities, you can create some sophisticated animation sequences. Have a look at the HTML+TIME Animations page for more examples of what you can do with animation.
The key to understanding HTML+TIME animation is to realize that you are actually changing the value of properties over time. For instance, changing the height of a DIV from 70 pixels to 200 pixels over a period of half a second makes the DIV look like it is "growing." This exact technique was used in the ad banner to make it look like the banner was expanding downward.
In order to animate a property, you must first explicitly set that property. For instance, if you want to animate the height property on a DIV element, you need to set it. You can use the inline STYLE attribute for this.
<DIV STYLE="height:70;" ?gt;
Animated DIV!
</DIV>
Another way to set the property is to create a style class with the CSS height property set and apply it to the element.
<STYLE>
.clsAnimatedDIV { height:70; …}
</STYLE>
?
<DIV class="clsAnimatedDIV" ?gt; </DIV>
It is very important to explicitly set the value of any property you want to animate, or your animation code will not work.
When animating the position of an element, you must set the position property to either absolute or relative, in addition to setting the top and left properties.
The reason for this requirement is that, by default, elements on a Web page are part of the flow of HTML data and do not have explicit values for all their properties. Imagine the performance hit and memory overhead it would take to maintain a separate value for every property on every element on a given Web page.
There are four elements used to animate other elements on a Web page.
The t:animate element is a generic element used to animate most properties of HTML elements. Animating a property means to change its value over time. For instance, you can change the value of the top property of a DIV from 10 to 100 over 5 seconds to make it slide down the page.
<DIV ID="myDiv" ?gt;Some text in the DIV.</DIV>
<t:animate targetElement="myDiv" attributeName="top" from="10" to="100"
begin="2" dur="5" ?>
Use the targetElement attribute to specify which element to animate, in this case, myDiv. Set this attribute to the ID of the element you'd like to animate. Use the attributeName attribute to specify which property you'd like to animate on the element you specified with the targetElement attribute, in this case, top. The attributeName and targetElement attributes apply to all four of the animation elements.
In the ad banner sample, the t:animate element is used to resize the ad banner and move the Internet Explorer logo back and forth. See the Sample code for the declarations of the adBanner and ieLogo elements.
<!-- These three tags animate the ad banner and its contents. -->
<t:animate id="openBanner" targetElement="adBanner" attributeName="height"
begin="startButton.click" to="200" dur="0.5" fill="hold"/>
<t:animate id="animateLogo" targetElement="ieLogo" attributeName="left"
begin="openBanner.end + 0.25" to="195" dur="1" autoReverse="true"
repeatCount="3"/>
<t:animate id="closeBanner" targetElement="adBanner" attributeName="height"
begin="animateLogo.end + 0.25" to="70" dur="0.5" fill="hold"/>
The t:animateColor element is used to change the color of an object. It uses values specific to color properties. Specify color values using the predefined color names or hexadecimal RGB values. For more information on color values, see Specifying Animation Values.
In the ad banner sample, the background color oscillates between white and navy, while the text color oscillates in the opposite direction. The sample previously set the background color to white and the color navy before applying these color animations.
<!-- These tags animate the background and text colors. -->
<t:animateColor targetElement="adBanner" attributeName="backgroundColor"
to="navy" dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
end="startButton.click"/>
<t:animateColor targetElement="adBanner" attributeName="color" to="white"
dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
end="startButton.click"/>
Use the calcMode attribute to set the interpolation mode for an animated element. The default value for calcMode is linear, which causes an element to animate smoothly from the beginning value to the end value. In the ad banner example, the color oscillates smoothly from navy to white because calcMode is set to the default value of linear. Other values for calcMode include discrete (jumps), paced (set pace), and spline (spline curve). The calcMode attribute applies to the t:animate and t:animateMotion elements, in addition to t:animateColor. The default value for t:animateMotion is paced.
Use the t:animateMotion element to animate the position (top and left) of an element. This element is specifically for animating the top and left properties, so there is no need to use the attributeName attribute. Instead, specify the from, to, or values attribute in top/left pairs. The ad banner sample can be written with the t:animateMotion element instead of the t:animate element.
<t:animateMotion id="animateLogo" targetElement="ieLogo"
begin="openBanner.end + 0.25" to="195,0" dur="1" autoReverse="true"
repeatCount="3"/>
When using t:animateMotion, you must set the position property to either absolute or relative on the element you want to animate, in addition to the top and left properties.
Use the path attribute to specify a path for an element to follow. The path attribute uses a subset of the Scalable Vector Graphics (SVG) path syntax. The following example uses the path attribute to "bounce" a graphic file across the page.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<t:img id="ieLogo" src="elogohalf.gif" style="position:absolute;
left:10; top:150; cursor:hand;"/>
<t:animateMotion targetElement="ieLogo"
path="m 0 0 c 25 -150 75 -150 100 25" dur="2" repeatCount="3"
accumulate="sum" fill="freeze"/>
</BODY>
</HTML>
Use the t:set element to set a property directly to a specific value. For example, you can set the top property to 200.
<t:set targetElement="myDiv" attributeName="top" to="200" ?>
This is similar to using a calcMode value of discrete, but only to change to a single value.
Now that you've seen most of the active code for the ad banner, here is the entire sample.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time { behavior: url(#default#time2); }
.clsAdBanner { border:thin solid black;
height:70;
width:300;
text-align:center;
font-family:Arial;
font-size:10pt;
font-weight:bold;
color:navy;
background-color:white;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="adBanner" class="clsAdBanner">
<SPAN id="startButton" class="time" style="cursor:hand"
end="openBanner.end" timeAction="display">
Add some excitement to your Web pages without writing a bunch of
script!<BR><BR>Click here to find out how...
</SPAN>
<DIV id="adContent" class="time" begin="openBanner.end + 0.25"
end="closeBanner.begin" timeAction="display">
Microsoft® Internet Explorer 5.5 with<BR>
HTML+TIME 2.0 makes animation easier<BR>
than ever. No scripting required!
<t:img id="ieLogo" style="position:absolute; left:15; top:90;"
src="elogo.gif"/>
</DIV>
<DIV class="time" begin="closeBanner.end" timeAction="display">
<A HREF="http://www.microsoft.com/windows/ie/default.htm">
Click here to get it!<BR>
<t:IMG id="downloadLogo" src="msielogo.gif"/>
</A>
</DIV>
</DIV>
<DIV class="time" begin="closeBanner.end" timeAction="display">
<BR><BR>
<A HREF="animation.doc">Back to Animation Article</A>
</DIV>
<!-- The following tags do the animation. -->
<!-- These three tags animate the ad banner and its contents. -->
<t:animate id="openBanner" targetElement="adBanner" attributeName="height"
begin="startButton.click" to="200" dur="0.5" fill="hold"/>
<t:animate id="animateLogo" targetElement="ieLogo" attributeName="left"
begin="openBanner.end + 0.25" to="195" dur="1" autoReverse="true"
repeatCount="3"/>
<t:animate id="closeBanner" targetElement="adBanner" attributeName="height"
begin="animateLogo.end + 0.25" to="70" dur="0.5" fill="hold"/>
<!-- These tags animate the background and text colors. -->
<t:animateColor targetElement="adBanner" attributeName="backgroundColor"
to="navy" dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
end="startButton.click"/>
<t:animateColor targetElement="adBanner" attributeName="color" to="white"
dur="4" autoReverse="true" repeatCount="indefinite" begin="0"
end="startButton.click"/>
</BODY>
</HTML>
Use the values attribute to specify a list of animation values. For t:animateMotion, specify the values in top/left pairs separated by semicolons.
values="0,0;200,0;200,200;0,200;100,100;0,0"
For height or width on the t:animate tag, specify values in pixels.
values="100;200;300;400"
Specify color values on the t:animateColor tag using predefined color names or hexadecimal RGB notation.
values="yellow;black;red;green;cyan"
values="#FF0000;#F88F08"
In addition to the values attribute, you can specify individual values using the shorthand attributes from, to, and by.
Using from, to, and by
Use the from and to attributes like a values list with two values.
from="100" to="400"
Use the by attribute to specify how a value changes by a given amount. In the following example, the property will change by 300 at a time. It will start at 100, increment to 400, 700, 1000, and so on.
from="100" by="300"
The keyTimes and keySplines attributes are always used together. You must also set the calcMode attribute to spline. Use these attributes to specify the pacing of an animated element along a spline curve. The keyTimes and keySplines attributes are similar to the accelerate and decelerate attributes except that they provide much finer control.
Use the keyTimes attribute to specify a list of time values to control the pace of animation. The values are a semicolon-separated list of time values, representing a proportional offset into the simple duration of the animation element. Each successive time value in the list must be greater than or equal to the preceding time value. Valid time values are floating-point numbers between 0 and 1, inclusive.
Use the keySplines attribute to specify Bezier control points associated with keyTimes. Each control point is a set of four floating-point values describing the Bezier control points for one time segment. The keySplines attribute describes the time between the keyTimes values. Consequently, keySplines values always have one set less than keyTimes.
Here is an example that uses keyTimes and keySplines to define how a DIV element moves across the page. The DIV appears to slow down as it reaches its destination, like a car coming to a stoplight.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time { behavior: url(#default#time2); }
</STYLE>
</HEAD>
<BODY ID="oBody">
<DIV ID="oDiv" style="position:absolute; top:50; left:20; background-color:yellowgreen;">
Animated DIV with pace<BR>
that changes over time.
<t:animateMotion begin="1" dur="3" calcMode="spline"
keySplines="0 .75 .5 1" keyTimes="0;1" values="20,0;300,0"
fill="hold"/>
</DIV>
</BODY>
</HTML>