KEYSPLINES Attribute | keySplines Property (t:TRANSITIONFILTER, t:ANIMATE, t:ANIMATECOLOR, ...)

HTML (DHTML)

previous page next page

KEYSPLINES Attribute | keySplines Property

Sets or retrieves a set of Bezier control points that define the interval pacing of an animation.

Syntax

HTML <ELEMENT KEYSPLINES = vPoint... >
Scripting object.keySplines(val) [ = vPoint ]

HTML	<ELEMENT KEYSPLINES = vPoint... >
Scripting	object.keySplines(val) [ = vPoint ]

Possible Values

vPoint String that specifies or receives a semicolon-separated list of Bezier control points associated with the keyTimes list. Each control point is a set of four floating-point values, describing the Bezier control points for one time segment. The control points are listed in the following order:
x1 A floating-point value between 0 and 1 representing the x-axis of the first control point.
y1 A floating-point value between 0 and 1 representing the y-axis of the first control point.
x2 A floating-point value between 0 and 1 representing the x-axis of the second control point.
y2 A floating-point value between 0 and 1 representing the y-axis of the second control point.
The property is read/write. The property has no default value.

Remarks

The keyTimes values that define the associated time segment are the Bezier anchor points for the spline that determines how the animation is interpolated during that time segment. The keySplines values are the control points for the spline. Therefore, there must be one fewer set of control points than keyTimes.
The keySplines value is ignored unless the calcMode property is set to spline.

Example

This example demonstrates how to use the keySplines and keyTimes properties 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>

This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 .

Applies To

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

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