ACCUMULATE Attribute | accumulate Property

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

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

Syntax

HTML <ELEMENT ACCUMULATE = sType... >
Scripting [ sType = ] object.accumulate [ = sType ]

Possible Values

sType String that specifies or receives one of the following values.
none
Default. Repeat iterations are not cumulative.
sum
Each repeat iteration after the first one builds on the last value of the previous iteration.

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

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.

Example

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

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

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

Applies To

t:TRANSITIONFILTER, t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION

See Also

Introduction to HTML+TIME