HBCMS更多的中文手册参考:

CALCMODE Attribute | calcMode参数属性

DHTML中文手册

Sets or retrieves the interpolation mode for the animation.

dhtml语法

HTML<ELEMENT CALCMODE = sMode... >
Scriptingobject.calcMode(calcmode) [ = sMode ]

DHTML可能的值

sModeString that specifies or receives one of the following values:
discreteThe animation jumps from one value to the next, without any interpolation.
linearDefault. The animation uses simple linear interpolation between values to calculate the animation function.
pacedThe animation defines an even pace of change across the animation. This is only supported for attribute values that define a linear numeric range, and for which a notion of distance between points can be calculated, such as width or height.
splineThe 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:animatemotion element is paced.

if the attribute does not support linear interpolation, as with a string value, discrete interpolation is used instead.

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.

DHTML代码范例

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

<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>
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.

是否符合公共标准

This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 Non-Microsoft link.

Applies To

t:ANIMATE, t:ANIMATECOLOR

更多语法参考

Introduction to HTML+TIME