Partager via

KEYTIMES Attribute | keyTimes Property

  • Article

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

Sets or gets a list of time values used to control the pacing of an animation.

Syntax

HTML <ELEMENT KEYTIMES = vTimes... >
Scripting [ vTimes = ] object.keyTimes [ = vTimes ]

Possible Values

vTimes String that specifies or receives 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.

The property is read/write. The property has no default value.

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.

Example

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.

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

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/keySplines_keyTimes.htm

Applies To

t:TRANSITIONFILTER, t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION

See Also

Introduction to HTML+TIME, keySplines