애니메이션이 다른 애니메이션들의 추가사항인가를 나타내는 값을 반환하거나 설정한다.
| replace | 디폴트이며, 애니메이션이 현 애트리뷰트 값과 다른 우선 순위가 낮은 다른 애니메이션을 덮어씌운다. |
| sum | 애니메이션이 현재의 값과 다른 우선 순위가 낮은 애니메이션에 추가된다. |
이 속성은 읽기/쓰기로 디폴트값은 replace이다.
additive 속성은 문자열이나 부울값 같은 것은 적용되지 않고 지원하지 못한다.
to와 by 속성으로 애니메이션 기능을 설정할 수 있는데, 일부의 경우에 additive 애트리뷰트 값을 덮어씌운다.
from 없이 by를 사용하면, 애니메이션이 추가된다. 이는 additive="sum"에 해당된다. 그러나 같은 방식으로 to를 사용하고 애트리뷰트가 additive 속성을 지원하고 있으면, 애니메이션이 조합되어 추가되거나 추가되지 않는다. 현재의 값은 시작하는 싯점에서 사용되고 지속되지남 종료값은 to 애트리뷰트값을 덮어씌워 애니메이션 추가가 되지 않은 것처럼 된다.additive 속성을 accumulate 애트리뷰트와 혼종하지 말아야 한다. additive 속성은 기초값을 갖고 다른 애니메이션들과 어떻게 결합하는가를 정의하고, accumulate는 이니메이션 기능이 반복과정에서 자체적으로 어떻게 작용하는가 만을 정의한다.
| 개체 | script | HTML | 규격 | IE |
|---|
이 속성은 (영문) W3C SMIL 2.0(Synchronized Multimedia Integration Language)에서 정의되었다.
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<IMPORT namespace="t" implementation="#default#time2">
<STYLE>.time{ behavior: url(#default#time2);}</STYLE>
<SCRIPT>
function beginreplace(){
count.innerText='1';
aniObj.additive=additive1.innerText='replace';
aniObj.beginElement();
showW.innerText=showH.innerText='';
}
function beginSum(){
count.innerText='1';
aniObj.additive=additive1.innerText='sum';
aniObj.beginElement();
showW.innerText=showH.innerText='';
}
function displayDimension(){
if(aniObj.additive=='sum'){
showH.innerText='높이:'+divObj.style.height;
showW.innerHTML='총 너비:250px=('+aniObj.by+'+'+divObj.style.width+')<HR width=250>';
}else{
showH.innerText='높이:'+divObj.style.height;
showW.innerHTML='총 너비:'+aniObj.by+'px<HR width=150>';
}
}
</SCRIPT>
</HEAD>
<BODY>
<T:ANIMATE id="aniObj" targetElement="divObj" attributeName="width" by="150" dur="3" repeatCount="3" begin="indefinite"
onend="displayDimension();" onrepeat="count.innerText=aniObj.currTimeState.repeatCount+1" fill="freeze" />
<DIV id="divObj" style="position:ralative;top:0;left:0;height:50;width:100;padding:9;
background-color:aqua;text-align:center;font-size:20;border:solid 2 blue;">확장 DIV</DIV>
additive=<SPAN id="additive1" style=color:blue></SPAN><BR>
횟수 : <SPAN id="count" style=color:blue>1</SPAN><BR>
<SPAN id="showH"></SPAN> <SPAN id="showW"></SPAN>
<P>
<BUTTON onclick="beginreplace()"><B>additive</B>=replace</BUTTON>
<BUTTON onclick="beginSum()"><B>additive</B>=sum</BUTTON></P>
</BODY>
</HTML>