

<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 -->
<DIV id = "T2" style="position:absolute;height:170;width:175;background-color:#00ff00;z-index:1"></div>
<DIV id = "T1" style="position:relative;height:85;width:85;top:45;left:45; background-color:#00ff00;z-index:2;border-Color:black;border-Width:3;border-style:solid"></div>
<img src= "../images/spline_img03.gif" style = "position:absolute;top:215;">
<img src= "../images/spline_img04.gif" style = "position:absolute;top:420;">
<t:animateColor begin="2s" dur="6s" calcMode="spline" keySplines="0 .75 .25 1;1 0 .25 .25"  keyTimes="0;.8; 1" targetElement="T1"  values="black;red;blue" additive="sum" attributeName="style.backgroundcolor" fill="hold"/>
<t:animateColor begin="2s" dur="6s" CalcMode=linear keyTimes="0;.8; 1" TargetElement=T2  values="black;red;blue" additive="sum" attributeName="style.backgroundcolor" fill="hold"/>
<!--*******************************************************************************-->
<!--***************everything past this line is informational**********************-->
<!--*****Timer that displays activeTime and shows persistence*****-->
<DIV align="left" style="position:absolute;top:10;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: 2 keySplines values.<br>
The inner box animation color is represented by the blue line on the graphs.  The outer box is animating linearly. <br>
At 0 seconds, the inner and outer boxes will be green.<br>
At 2 seconds, the first keytime starts and the inner and outer boxes will animate from green to yellow. The first graph illustrates the keySpline of the inner box during the first keytime.<br>
At 2-6.7 seconds, the inner box will start animating faster than the outside box, causing the inner box to look a brighter yellow.<br>
At 6.8 seconds, the inner and outer boxes should be the same color yellow.<br>
At 6.9 seconds, the second keytime starts and the inner and outer boxes will animate from yellow to cyan. The second graph illustrates the keySpline of the inner box during the second keytime.<br>
At 6.9-8 seconds, the inner box will animate slower than the outside box, causing the inner box to apear more yellow than the outside box.<br>
At 8 seconds, the inner and outer boxes quit animating and freeze on cyan.<br><br>
<B>SAMPLE CODE:</B><br>
<t:animateColor begin="2s" dur="6s" calcMode="spline" keySplines="0 .75 .25 1;1 0 .25 .25"  keyTimes="0;.8; 1" targetElement="T1"  values="black;red;blue" additive="sum" attributeName="style.backgroundcolor" fill="hold"/><br>
<t:animateColor begin="2s" dur="6s" CalcMode=linear keyTimes="0;.8; 1" TargetElement=T2  values="black;red;blue" additive="sum" attributeName="style.backgroundcolor" fill="hold"/><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: animateColor<br>
Feature: calcMode="spline" keySplines="0 .75 .25 1;1 0 .25 .25"  keyTimes="0;.8; 1"<br>
File Name: animateColor_spline_003.htm<br>
Media Components: images/spline_img03.gif, images/spline_img04.gif<br><br>
</div>
</BODY>
</HTML>