CALCMODE Attribute | calcMode Property
Sets or gets the interpolation mode for a t:ANIMATECOLOR element.
Syntax
HTML <t:ANIMATECOLOR CALCMODE = sMode... > Scripting [ sMode = ] t:ANIMATECOLOR.calcMode [ = calcmode ]
Possible Values
sMode String that specifies or receives one of the following values. discrete
The animation jumps from one value to the next value, with no interpolation.linearDefault. 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 the RGB values.paced
The animation defines an even rate of change across the animation. This is supported only 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 the RGB values.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 attribute, the by attribute, the from attribute, and the values attribute 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 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. The rate of change between hexadecimal RGB values does not remain constant, because 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. However, 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 value, 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 tospline
. Click the Show Me button to see an expanded version of this code example 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>
Applies To
t:ANIMATECOLOR
See Also