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

Introduction

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.

Prerequisites

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.

Declarative Animation

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.

• Gradually, or immediately, change the color of an element.
  
• Move an element along a specific path or make it jump to a location.
  
• Change the pace of an animation over time.
  
• Run an animation forward and in reverse.

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.

Animating Properties

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.

First Things First

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.

Animation Elements

There are four elements used to animate other elements on a Web page.

1. t:animate
   
2. t:animateColor
   
3. t:animateMotion
   
4. t:set

t:animate

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"/>

t:animateColor

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.

t:animateMotion

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>

Click here to run the sample.

<t:set targetElement="myDiv" attributeName="top" to="200" ?>

<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&reg; 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 >
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>

values="0,0;200,0;200,200;0,200;100,100;0,0"

values="100;200;300;400"

values="yellow;black;red;green;cyan"
values="#FF0000;#F88F08"

from="100" to="400"

from="100" by="300"

<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>