<HTML xmlns:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<style>.time {behavior: url(#default#time2)}</style>
</HEAD>
<BODY bgcolor="#eeffcc">
<!-- Time Content for testing -->
<img src="../images/spline_img03.gif" style="position:absolute;height:200;width:200;top:5;left:5"></img>
<DIV id = "T1" style="position:absolute; height:10; width:10; top:38; left:38; background-color:red"></div><br><br>
<t:animateMotion begin="2s" dur="5s" calcMode="spline" values="0,132;0,0" keySplines="0 .75 .25 1" keyTimes="0; 1" targetElement="T1" fill="freeze" autoreverse="true"/>
<t:animate begin="2s" dur="5s" calcMode=linear  to="170" targetElement="T1" attributeName="style.left" fill="freeze" autoreverse="true"/>
<!--*******************************************************************************-->
<!--***************everything past this line is informational**********************-->
<!--*****Timer that displays activeTime and shows persistence*****-->
<DIV align="left" style="position:absolute; left:300">
<B>TIMER:</B><BR>
Timer:
<span id="Timer" class="time" dur=".01"  repeatCount="indefinite" fill="hold" onrepeat="innerText=parseInt(document.body.currTimeState.activeTime);">0</span><br><br>
<!--*****Expectations, Sample Code, and Information*****-->
<B>EXPECTED BEHAVIOR:</B><br>
Testing: keySplines, keyTimes, autoReverse.<br>
At 0 seconds, the red dot will be in the upper left corner of the graph.<br>
At 2 seconds, the red dot will start following the blue line from the lower left corner.<br>
At 7 seconds, the red dot will have reached the upper right corner of the blue line and autoReverse.<br>
At 12 seconds, the red dot will have reached the starting position of the blue line and freeze<br>
**Note that the begin=2s is ignored on autoReverse causing the anamation to completed in 12 seconds.<br><br>
<B>SAMPLE CODE:</B><br>
<t:animateMotion begin="2s" dur="5s" calcMode="spline" values="0,132;0,0" keySplines="0 .75 .25 1"  keyTimes="0; 1" targetElement="T1" fill="freeze" autoreverse="true"/>
<t:animate begin="2s" dur="5s" calcMode=linear  to="170" targetElement="T1" attributeName="left" fill="remove" autoreverse="freeze"/><br><br>
<B>INFORMATION:</B><br>
Copyright: Copyright 1998-2005  W3C (MIT, ERCIM, Keio), All Rights Reserved.
See http://www.w3.org/Consortium/Legal/.
Author: Debbie Newman, Microsoft<br>
Version: 11/02/2000<br>
Module: animateMotion<br>
Feature: calcMode="spline" keySplines="0 .75 .25 1" keyTimes="0; 1" autoreverse="true"<br>
File Name: animateMotion_spline_003_reverse.htm<br>
Media Components: images/spline_img03.gif<br><br>
</div>
</BODY>
</HTML>