keyTimes property
Sets or gets a list of time values used to control the pacing of an animation.
Syntax
| JScript |
|---|
|
Property values
Type: String
a semicolon-delimited 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.
Remarks
Each time in the keyTimes list corresponds to a value in the VALUES attribute list. There must be exactly the same number of times in the keyTimes list as there are values in the VALUES attribute list.
For linear and spline animations, the first time value in the keyTimes list must be zero; the last time value in the list must be one. The time associated with each value defines when that value is set; values are interpolated between the keyTimes specified.
For discrete animation, the first time value in the list must be zero. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the keyTimes list.
The value of keyTimes is ignored if the CALCMODE attribute is set to paced.
When you use keyTimes with the t:ANIMATEMOTION element, you must set the CALCMODE attribute to a value other than paced.
Examples
This example demonstrates how to use the keySplines property and the keyTimes property to set the pace of an animation. The keySplines property contains a list of Bezier control points to define the interval pacing of the animated DIV. The keyTimes property contains a list of time values to control the pacing of the animated DIV.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/keySplines_keyTimes.htm
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>keyTimes / keySplines Properties</TITLE>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time{ behavior: url(#default#time2);}
.div1{position:absolute; top:195px; height:100px; width:150px;
background-color:yellow; text-align:center; font-size:large;
border:solid black 2px;}
</STYLE>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<B>Simple timer:</B>
<SPAN id="Timer1" class="time" dur=".1" repeatCount="indefinite" fill="hold"
onrepeat="innerText=(oAnim.currTimeState.simpleTime);">0</SPAN>
<BR>
<B>Segment timer:</B>
<SPAN id="Timer2" class="time" dur=".1" repeatCount="indefinite" fill="hold"
onrepeat="innerText=(oAnim.currTimeState.activeTime);">0</SPAN>
<DIV id="t1" class="div1">How to use keyTimes and keySplines</DIV>
<t:animateMotion id="oAnim" begin="1;b1.click+1" dur="6s" autoReverse="true"
calcMode="spline" keySplines="0 1 .5 1;.5 1 0 1" keyTimes="0;.5;1"
values="25,0;250,50;500,0" targetElement="t1" fill="hold"/>
<P style="position:absolute;top:325px;">
<BUTTON id="b1"><B>Restart</B></BUTTON>
</P>
</BODY>
</HTML>
See also
Reference
Conceptual