CALCMODE Attribute | calcMode Property
| Internet Development Index |
Sets or retrieves the interpolation mode for the progress of the transitionFilter.
Syntax
HTML <t:TRANSITIONFILTER CALCMODE = sMode... > Scripting t:TRANSITIONFILTER.calcMode(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, without any 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
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. Here is a list of examples.
- VALUES = "0.3;0.6;0.8"
The animation spends 1/3 of its duration at each value (0.3, 0.6, and 0.8).
- VALUES = "0.3;0.6"
The animation spends 1/2 of its duration at each value (0.3 and 0.6).
- FROM = "0" TO = "0.8"
When the FROM and TO or BY attributes are used together, 1/2 of its duration is spent at the value of the FROM attribute and 1/2 of its duration is spent at the value of the TO or BY attribute (0 and 0.8).
- TO = "0.8"
When the FROM attribute is omitted, the animation spends 100% of its duration at the value of the TO or 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>This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Applies To
t:TRANSITIONFILTER
See Also
Introduction to HTML+TIME, Using HTML+TIME Transitions