KoXo 자바스크립트 - 속성(property) - calcMode | calcmode (t:ANIMATE, t:ANIMATECOLOR) (time)

Linear 예제

Discrete 예제

Paced 예제

Spline 예제

결과 표시창

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<IMPORT namespace="t" implementation="#default#time2">
<SCRIPT>
function btnEnable(obj){ //엘레멘트 시간이 완료된 후 단추들을 활성화 한다.
  showA.innerHTML='obj.id='+obj.id+' obj.calcMode='+obj.calcMode;
  b1.disabled=b2.disabled=b3.disabled=b4.disabled=false;
}
function btnDisable(){ //엘레멘트 시간이 시작되면 단추들을 불활성화 한다.
  b1.disabled=b2.disabled=b3.disabled=b4.disabled=true;
}
</SCRIPT>

<STYLE>
.time{ behavior: url(#default#time2);}
div.ani{position:relative;height:50;width:150;top:0;left:0;background-color:pink;text-align:center;
  font-size:16;font-weight:bold;padding:5;border:solid 1 blue;visibility:hidden;}
</STYLE>
</HEAD>

<BODY>
<DIV id="t1" class="ani">Linear 예제</DIV>
<T:animate id="tt1" begin="b1.click+1;" calcMode="linear" targetElement="t1" dur="4" from="50" to="400" attributeName="left" fill="remove"
  onbegin="btnDisable();" onend="btnEnable(this);t1.style.visibility='hidden'"/>

<DIV id="t2" class="ani">Discrete 예제</DIV>
<T:animate id="tt2" begin="b2.click+1;" calcMode="discrete" targetElement="t2" dur="4" from="50" to="400" attributeName="left" fill="remove"
  onbegin="btnDisable();" onend="btnEnable(this);t2.style.visibility='hidden'"/>

<DIV id="t3" class="ani">Paced 예제</DIV>
<T:animate id="tt3" begin="b3.click+1" calcMode="paced" targetElement="t3" dur="4" from="50" by="400" attributeName="left" fill="remove"
  onbegin="btnDisable();" onend="btnEnable(this);t3.style.visibility='hidden'"/>

<DIV id="t4" class="ani" style="z-index=1;">Spline 예제</DIV>
<T:animate id="tt4" begin="b4.click+1" calcMode="spline" targetElement="t4" dur="4" attributeName="left" fill="remove"
  keySplines="0 0 1 1" keyTimes="0; 1" values="50;400"
  onbegin="btnDisable(this);" onend="btnEnable(this);t4.style.visibility='hidden'" />

<P>
<BUTTON id="b1" onclick="t1.style.visibility='visible'" style="font-weight:bold;">Linear(디폴트) 예제</BUTTON>
<BUTTON id="b2" onclick="t2.style.visibility='visible'">Discrete 예제</BUTTON>
<BUTTON id="b3" onclick="t3.style.visibility='visible'">Paced 예제</BUTTON>
<BUTTON id="b4" onclick="t4.style.visibility='visible'">Spline 예제</BUTTON>
<DIV id="showA">결과 표시창</DIV>
</BODY>
</HTML>

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

values="0.3;0.6;0.8"	애니메이션의 지속시간을 0.3 0.6 0.8 각각 1/3씩 사용한다.
values="0.3;0.6"	애니메이션의 지속시간을 0.3 0.6 각각 1/2씩 사용한다.
from="0" to="0.8"	from과 to나 by 애트리뷰트가 설정되었으면, from 값 0에서 1/2, to나 by 애트리뷰트 값 0.8에서 1/2 씩 지속시간을 사용한다.
to="0.8"	from 애트리뷰트가 생략되었면, 애니메니션은 to나 by 애트리뷰트 값 0.8에서 지속시간 100%를 사용한다.