Поделиться через


accumulate property

Sets or gets a value that indicates whether the animation is cumulative.

Syntax

JScript
val = object.accumulate

 

Property values

Type: String

one of the following values.

Remarks

This property is ignored if the target attribute value does not support addition, or if the repeatCount value is one. Cumulative animation is not defined for animation that is specified by using the to attribute.

Examples

This example demonstrates the two values of the accumulate property: none and sum.

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

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

<STYLE>
    .time{ behavior: url(#default#time2);}
</STYLE>
<SCRIPT>
function beginNone(){
    count.innerText="1";
    t1.accumulate="none";
    accumulate1.innerText="none";
    t1.beginElement();
    l.innerText = "";
    h.innerText = "";   
}
function beginSum(){
    count.innerText="1";
    t1.accumulate="sum";
    accumulate1.innerText="sum";
    t1.beginElement();
    l.innerText = "";
    h.innerText = "";
}
function displayDimension(){
    if(t1.accumulate == 'sum'){
        l.style.left = "305px";
        h.style.left = "610px";
        l.innerText = "450px";
        h.innerText = "100px";
    }else{
        l.style.left = "135px";
        h.style.left = "310px";
        l.innerText = "150px";
        h.innerText = "100px";
    }
}
</SCRIPT>
</HEAD>

<BODY>

<SPAN id="l" style="position:absolute;top:100px;"></SPAN>
<SPAN id="h" style="position:absolute;top:165px;"></SPAN>

<t:ANIMATE id="t1" targetElement="div1" attributeName="width" by="150px"
    dur="3" repeatCount="3" begin="indefinite" onend="displayDimension();"
    onrepeat="count.innerText=t1.currTimeState.repeatCount+1" fill="freeze" />

<DIV id="div1"
    style="position:absolute;top:125px;left:25px;height:100px;width:125px;
    background-color:yellow;text-align:center;font-size:large;
    border:solid black 2px;">Expanding DIV
</DIV>

<SPAN style="position:absolute;top:245px;"><B>Accumulate:</B></SPAN>
<SPAN id="accumulate1" style="position:absolute;top:245px;left:130px;"></SPAN>
<SPAN style="position:absolute;top:265px;">Current Iteration:</SPAN>
<SPAN id="count" style="position:absolute;top:265px;left:150px;">1</SPAN>

<P style="position:absolute;top:300px;left:25px;">
<BUTTON onclick="beginNone()"><B>Accumulate</B> = NONE</BUTTON>
<BUTTON onclick="beginSum()"><B>Accumulate</B> = SUM</BUTTON>
</P>

</BODY>
</HTML>

See also

transitionFilter

animate

animateColor

animateMotion

Introduction to HTML+TIME