CALCMODE Attribute | calcMode Property | Internet Development Index |
Sets or retrieves the interpolation mode for a t:ANIMATECOLOR element.
Syntax
HTML <t:ANIMATECOLOR CALCMODE = sMode... > Scripting t:ANIMATECOLOR.calcMode(calcmode) [ = sMode ]
Possible Values
sMode String that specifies or receives one of the following values:
discrete The animation jumps from one value to the next, without any interpolation. linear Default. The animation uses simple linear interpolation between values to calculate the animation function. In the context of t:ANIMATECOLOR, valid values are hexadecimal RGB values or the keywords that represent them. paced The animation defines an even rate of change across the animation. This is only supported for attribute values that define a linear numeric range, values for which a notion of distance between points can be calculated (such as width or height), and hexadecimal RGB values or the keywords that represent them. spline The animation interpolates from one value to the next according to a time function defined by a cubic Bezier spline. The points of the spline are defined in the keyTimes property and the control points for each interval are defined in the keySplines property. The property is read/write. The property has a default value of linear.
Remarks
The default value for the t:ANIMATECOLOR element is linear.
Use the calcMode attribute to determine how the specified values of the to, by, from, and values attributes are interpolated.
Example
This example shows how to set the interpolation mode for an animation by specifying a value for the calcMode attribute. The a2 t:ANIMATECOLOR element changes the value of a DIV element's backgroundColor property over an 8-second duration. When calcMode is set to discrete, the animation displays each of the color values #FF0000, #0000FF, #32CD32, and #FFFF00 for 2.5 seconds without interpolation. When calcMode is set to linear, the animation distributes the color values evenly across the 10-second duration, but the rate of change between hexadecimal RGB values does not remain constant, since the colors in the values list might not be evenly spaced along the RGB color model. When calcMode is set to paced, the animation maintains a constant rate of change between color values梙owever, the intervals between the appearance of each listed value might be different.
When calcMode is set to spline, the animation interpolates from one value in the values list to the next according to a time function defined by a cubic Bezier spline. The points of the spline are defined in the keyTimes attribute, and the control points for each interval are defined in the keySplines attribute (keyTimes and keySplines must be added to this example if calcMode is set to spline). Click the Show Me button to see an expanded version of this snippet that resets the calcMode attribute for the animation.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY> <t:PAR id="p1" begin="0" dur="13" fill="hold" onbegin="outerDIV.innerText=(a2.calcMode);"> <t:ANIMATECOLOR id="a2" targetElement="innerDIV" attributeName="background-color" values="#FF0000;#0000FF;#32CD32;#FFFF00" begin="2" dur="8" fill="hold" calcMode="paced" /> <!-- When you set calcMode to "spline", you must also set the keyTimes and keySplines attributes on the element. --> </t:PAR> <DIV id="outerDIV" class="time" style="FONT-SIZE: 18; LEFT: 68px; WIDTH: 279px; POSITION: absolute; TOP: 240px; HEIGHT: 217px; BACKGROUND-COLOR: #B0C4DE; TEXT-ALIGN: left; padding-left:3; border:1px solid black;"></DIV> <DIV id="innerDIV" class="time" style="FONT-SIZE: 18; LEFT: 92px; WIDTH: 228px; POSITION: absolute; TOP: 278px; HEIGHT: 148px; BACKGROUND-COLOR:#FFFFFF; TEXT-ALIGN: left;padding-left:3"></DIV> </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.
Applies To
t:ANIMATECOLOR
See Also
Introduction to HTML+TIME, Color Table