tanimateColor에서 진행에 따른 점진적 변환의 모드를 반환하거나 설정한다.

인수
: (속성 문자열)
속성값은 tanimateColor에서 진행에 따른 점진적 변환의 모드를 나타내는 문자열이다.

discrete 애니메이션은 점진적이 아니고 한 값에서 다른 값으로 직접 변경된다.
linear 디폴트이며, 애니메이션은 점진성 기능을 단순 직선상 계산으로 표현한다. t:ANIMATECOLOR 속성의 유효한 값은 16진수 색상값이나 그 색상을 키워드이다.
paced 애니메이션은 전 점진적 변환을 일정한 간격으로 한다. 이는 직선적 수치 범위의 애트리뷰트값만 지원하고 지정한 너비나 높이 같은 두 지점간의 거리를 계산한다. 유효한 값은 16진수 색상값이나 그 색상을 키워드이다.
spline 육면체 cubic Bezier spline에 의하여 정의된 시간 기능에 따라 다음 점진적 값으로 애니메이션이 계산된다. 이 판의 점들은 keyTimes 속성으로 정의하고, 각 간격 제어점은 keySplines 속성으로 설정한다.

이 속성은 읽기전용 혹은 읽기/쓰기로 디폴트값은 linear이다.

특기

calcMode 애트리뷰트는 점진적 변환에서 to, by, from과 values 애트리뷰트들의의 값을 어떻개 결정하는가를 지정하는데 사용된다.

적용
개체scriptHTML규격IE
참조
HTML+time begin by clacMode dur fill from targetElement to values 색상표

outerDiv(tani1):
innerDiv(tani2):

결과 표시창

t:ANIMATECOLOR 엘레멘트는DIV 엘레멘트의 backgroundColor 속성값을 설정한 모드에 따라 초동안 변환시킨다.
calcMode 속성이 values 값에있는 색상들에따라 

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time {behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
<SCRIPT>
function setMode(io,jobType){
  if (!jobType) jobType='linear';
  if (io=='out'){
    tani1.calcMode=jobType;
    if (jobType=='spline'){
      tani1.keySplines='0 .2 .2 .5;.2 .5 .2 .5;.5 .5 .2 .7;.5 .7 .5 1';
      tani1.keyTimes='.2;.5;.7;1';
      innerDIV.style.visibility='hidden';
    } else tani1.keySplines=tani1.keyTimes='';
  } else {
    tani2.calcMode=jobType;
    if (jobType=='spline'){
      tani2.keySplines='0 1 .5 1;.5 1 0 1';
      tani2.keyTimes='0;.5;1';
    } else tani2.keySplines=tani2.keyTimes='';
  }
  showAll();
  tani1.beginElement();
  tani2.beginElement();
}

function showAll(){
  outerDIV.innerText=(tani1.calcMode);
  innerDIV.innerText=(tani2.calcMode);
  str='tani1.calcMode=<FONT color=red><B>'+tani1.calcMode+'</B></FONT><BR>';
  str+='tani1.targetElement='+tani1.targetElement+'<BR>';
  str+='tani1.begin='+tani1.begin+'<BR>';
  str+='tani1.dur='+tani1.dur+'<BR>';
  str+='tani1.attributeName='+tani1.attributeName+'<BR>';
  str+='tani1.values='+tani1.values+'<BR>';
  str+='tani1.keySplines='+tani1.keySplines+'<BR>';
  str+='tani1.keyTimes='+tani1.keyTimes+'<BR><BR>';
  str+='tani2.calcMode=<FONT color=red><B>'+tani2.calcMode+'</B></FONT><BR>';
  str+='tani2.targetElement='+tani2.targetElement+'<BR>';
  str+='tani2.begin='+tani2.begin+'<BR>';
  str+='tani2.dur='+tani2.dur+'<BR>';
  str+='tani2.attributeName='+tani2.attributeName+'<BR>';
  str+='tani2.values='+tani2.values+'<BR>';
  str+='tani2.keySplines='+tani2.keySplines+'<BR>';
  str+='tani2.keyTimes='+tani2.keyTimes+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:PAR id="parObj" begin="0" dur="13" onbegin="showAll()" fill="hold">
</T:PAR>
<T:ANIMATECOLOR id="tani1" targetElement="outerDIV" begin="2" dur="8"
  attributeName="background-color" values="#FF0000;#0000FF;#32CD32;#FFFF00" calcMode="linear" fill="hold" />
<DIV id="outerDIV" class="time" style="font-size:18;position:relative;top:0;left:0;width:600;height:200;
    background-color:#00FF00;padding:10;border:solid 1 blue;"></DIV>
<T:ANIMATECOLOR id="tani2" targetElement="innerDIV" begin="2" dur="8"
  attributeName="background-color" values="#FF0000;#0000FF;#32CD32;#FFFF00" calcMode="paced" fill="hold" />
</T:PAR>
<DIV id="innerDIV" class="time" style="font-size:18;position:relative;top:-175;left:100;width:400;height:150;
    background-color:#ffffff;padding:10;border:dotted 3 red;"></DIV>

<P style="position:relative;top:-150">
<SPAN style=width:110>outerDiv(tani1)</SPAN>:
<BUTTON onclick="setMode('out','linear')">linear 시작</BUTTON>
<BUTTON onclick="setMode('out','discrete')">discrete 시작</BUTTON>
<BUTTON onclick="setMode('out','paced')">paced 시작</BUTTON>
<BUTTON onclick="setMode('out','spline')">spline 시작</BUTTON><BR>

<SPAN style=width:110>innerDiv(tani2)</SPAN>:
<BUTTON onclick="setMode('in','linear')">linear 시작</BUTTON>
<BUTTON onclick="setMode('in','discrete')">discrete 시작</BUTTON>
<BUTTON onclick="setMode('in','paced')">paced 시작</BUTTON>
<BUTTON onclick="setMode('in','spline')">spline 시작</BUTTON>
<DIV id=showA style=position:relative;top:-150>결과 표시창</DIV>
</P>
</BODY>
</HTML>

t:ANIMATECOLOR의 from, 속성 예제

외부 DIV
내부 DIV

결과 표시창

두개의 t:ANIMATECOLOR 엘레멘트가 각각 div 엘레멘트의 backgroundColor를 변경시키며, 내부 DIV은 배경색이 연초록에서 노랑으로, DIV 외부 은 노랑에서 연초록으로 애니메이션된다.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time {behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
<SCRIPT>
function showAll2(obj){
  objid=obj.id;
  str=objid+'.attributeName='+obj.attributeName+'<BR>';
  str+=objid+'.from='+obj.from+'<BR>';
  str+=objid+'.to='+obj.to+'<BR>';
  str+=objid+'.targetElement='+obj.targetElement+'<BR>';
  str+=objid+'.begin='+obj.begin+'<BR>';
  str+=objid+'.dur='+obj.dur+'<BR>';
  str+=objid+'.fill='+obj.fill+'<BR>';
  str+=objid+'.calcMode='+obj.calcMode+'<BR>';
  if (objid=='ac1Obj') str+='outerDiv2.style.backgroundColor='+outerDiv2.style.backgroundColor+'<BR>';
  else str+='innerDiv2.style.backgroundColor='+innerDiv2.style.backgroundColor+'<BR>';
  showB.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:PAR id="parObj2" begin="0" dur="15" fill="hold">
<T:ANIMATECOLOR id="ac1Obj" attributeName="background-color" from="yellow" to="lightgreen"
  targetElement="outerDiv2" begin="0" dur="5" fill="hold"/>
<DIV id="outerDiv2" class="time"
  style="font-size:18;left:100;border:solid 3 red;position:absolute;width:400;height:200;
    background-color:red;text-align:center;padding:9">외부 DIV</DIV><BR><BR>

<T:ANIMATECOLOR id="ac2Obj" attributeName="background-color" from="lightgreen" to="yellow"
  targetElement="innerDiv2" begin="0" dur="5" fill="hold"/>
</T:PAR>
<DIV id="innerDiv2" class="time"
  style="font-size:18;left:150;border:dotted 3 blue;position:absolute;width:300;height:100;
    background-color:blue;text-align:center;padding:9">내부 DIV</DIV>
<P style=margin-top:190></P>
<BUTTON onclick="parObj2.beginElement()">다시 시작</BUTTON>
<BUTTON onclick="showAll2(ac1Obj)">외부 내용 보기</BUTTON>
<BUTTON onclick="showAll2(ac2Obj)">내부 내용 보기</BUTTON>
<DIV id=showB>결과 표시창</DIV>
</BODY>
</HTML>