calcMode property

Sets or gets the interpolation mode for the animation.

Syntax

JScript
calcmode = object.calcMode

Property values

Type: String

one of the following values.

Remarks

The default value for the t:ANIMATEMOTION element is paced.

If an attribute, for example, a string value, does not support linear interpolation; then discrete interpolation is used.

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 time period, 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).

Examples

This example uses the calcMode property to demonstrate how to set the interpolation mode for an animation.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/calcmode.htm

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>calcmode Property</TITLE>
<?IMPORT namespace="t" implementation="#default#time2">

<SCRIPT>
function btnEnable(){
//After element's timeline has ended, enable buttons.
    b1.disabled=false;
    b2.disabled=false;
    b3.disabled=false;
    b4.disabled=false;
}

function btnDisable(){
//Element's timeline begins; disable buttons.
    b1.disabled=true;
    b2.disabled=true;
    b3.disabled=true;
    b4.disabled=true;
}
</SCRIPT>

<STYLE>
    .time{ behavior: url(#default#time2);}
</STYLE>
</HEAD>

<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
    LINK="#000000" VLINK="#808080" ALINK="#000000">
<H2 style="position:absolute;top:35px;">Click one of the buttons below.</H2>
<P style="position:absolute;top:65px;">This example demonstrates each of the
    possible values for the calcMode property.</P>

<DIV id="t1" style="position:absolute;top:75px;left:50px;height:100px;
    width:100px;background-color:yellow;text-align:center;font-size:large;
    visibility:hidden">
</DIV>
<t:animate id="tt1" begin="b1.click + 1;" dur="4s" from="50" to="410"
    targetElement="t1" attributeName="left" fill="remove"
    onbegin="btnDisable();" onend="t1.style.visibility='hidden';btnEnable();"/>

<DIV id="t2" style="position:absolute;top:75px;left:50px;height:100px;
    width:100px;background-color:yellow;text-align:center;font-size:large;
    visibility:hidden">
</DIV>
<t:animate id="tt2" begin="b2.click + 1;" calcmode="discrete" dur="4s"
    from="50" to="410" targetElement="t2" attributeName="left" fill="remove"
    onbegin="btnDisable();" onend="t2.style.visibility='hidden';btnEnable();"/>

<DIV id="t3" style="position:absolute;top:75px;left:50px;height:100px;
    width:100px;background-color:yellow;text-align:center;font-size:large;
    visibility:hidden">
</DIV>
<t:animate id="tt3" begin="b3.click + 1" dur="4s" calcMode="paced" from="50"
    by="335" targetElement="t3" attributeName="left" fill="remove"
    onbegin="btnDisable();" onend="t3.style.visibility='hidden';btnEnable();"/>

<DIV id="t4" style="position:absolute;z-index=1;top:75px;left:50px;
    height:100px;width:100px;background-color:yellow;text-align:center;
    font-size:large;visibility:hidden">
</DIV>
<t:animate id="tt4" begin="b4.click + 1" dur="4s" calcMode="spline"
    keySplines="0 0 1 1" keyTimes="0; 1" values="200;410" targetElement="t4"
    attributeName="left" fill="freeze" onbegin="btnDisable();"
    onend="t4.style.visibility='hidden';btnEnable();"/>

<P style="position:relative;top:175px;">
<BUTTON id="b1" onclick="t1.style.visibility='visible';tt1.calcmode='linear';
    t1.innerText='Linear Example';" style="font-weight:bold;">Default Linear</BUTTON>
<BUTTON id="b2" onclick="t2.style.visibility='visible';
    t2.innerText='Discrete Example';">Show Discrete</BUTTON>
<BUTTON id="b3" onclick="t3.style.visibility='visible';
    t3.innerText='Paced Example';">Show Paced</BUTTON>
<BUTTON id="b4" onclick="t4.style.visibility='visible';
    t4.innerText='Spline Example';">Show Spline</BUTTON>
</BODY>
</HTML>

See also

animate

animateColor

Introduction to HTML+TIME