CALCMODE Attribute | calcMode Property

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

Sets or gets the interpolation mode for the progress of the transitionFilter element.

Syntax

HTML <t:TRANSITIONFILTER CALCMODE = sMode... >
Scripting [ sMode = ] t:TRANSITIONFILTER.calcMode [ = sMode ]

Possible Values

sMode String that specifies or receives one of the following values.
discrete
The progress of the transition jumps from one value to the next value, with no interpolation.
linear
Default. The transition uses simple linear interpolation between values to calculate the animation function.

The property is read/write. The property has a default value of linear.

Remarks

calcMode was introduced in Microsoft Internet Explorer 6.

Use the calcMode attribute to determine how the specified values of the values, to, by, and from attributes are interpreted. For an illustration of this, see the following example.

When this property is set to a value of discrete, the duration of the animation is divided into equal time periods that depend on the values assigned to one or more of the following attributes: TO, FROM, BY, VALUES, or PATH. As one time period moves to the next, the animation jumps to the next value with no interpolation. The following is a list of examples.

  • VALUES = "0.3;0.6;0.8"

    The animation spends one-third of its duration at each value (0.3, 0.6, and 0.8).

  • VALUES = "0.3;0.6"

    The animation spends one-half of its duration at each value (0.3 and 0.6).

  • FROM = "0" TO = "0.8"

    When the FROM attribute is used with the TO attribute or the BY attribute, one-half of its duration is spent at the value of the FROM attribute, and one-half of its duration is spent at the value of the TO attribute or the BY attribute (0 and 0.8).

  • TO = "0.8"

    When the FROM attribute is omitted, the animation spends 100 percent of its duration at the value of the TO attribute or the BY attribute (0.8).

Example

This example shows how the calcMode property determines the way the values attribute is interpreted.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
    .time{behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" 
implementation = "#default#time2" />
</HEAD>
<BODY>

<t:TRANSITIONFILTER BEGIN="oDiv1.begin" TYPE="barWipe" DUR="5" 
TARGETELEMENT="oDiv1" VALUES=".1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0" 
CALCMODE="discrete"/>

<t:TRANSITIONFILTER BEGIN="oDiv1.begin" TYPE="barWipe" DUR="5" 
TARGETELEMENT="oDiv2" VALUES=".1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0" 
CALCMODE="linear"/>

<INPUT TYPE="button" ID="oStartButton" VALUE="Start Transition">
<P>
<DIV CLASS="time"  begin="oStartButton.click" ID="oDiv1" DUR="indefinite"  
STYLE="position:relative; left:20px; width:420px; height:100px; 
background-image:url(ART_time_progress.gif); background-repeat: no-repeat;">
</DIV>

<DIV CLASS="time"  begin="oStartButton.click" ID="oDiv2" DUR="indefinite"  
STYLE="position:relative; left:20px; width:420px; height:100px; 
background-image:url(ART_time_progress.gif); background-repeat: no-repeat;">
</DIV>
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/calcModeEX1.html

Applies To

t:TRANSITIONFILTER

See Also

Introduction to HTML+TIME, Using HTML+TIME Transitions