애니메이션의 단계별 제어에 사용되는 시간값들의 목록을 반환하거나 설정한다.
속성값은 애니메이션의 단계별 제어에 사용되는 시간값들의 목록을 나타내는 문자열이다.
keyTimes 세미콜론(;)으로 분리된 시간값들의 목록 문자열은 애니메이션 엘레멘트의 비례적인 단순 지속시간의 차이(offset)를 나타낸다. 목록의 각 후속시간값은 앞의 값보다는 크던가 같아야 한다. 유효한 시간값은 0과 1 사이의 부동소수점 수치이다.
이 속성은 읽기/쓰기이며 디폴트값은 없다.
keyTimes 목록의 각 시간은 values 속성값에 있는 목록의 값에 해당한다. keyTimes 목록의 시간값 갯수와 values 애트리뷰트이 값의 갯수가 같아야 한다.
선상이나 판막(spline) 애니메이션에서 keyTimes 목록의 첫번째 값은 0 이어야 하고, 마지막 값은 1 이어야 한다. 목록의 각 값은 애니네미션 각 단계의 시간이며, 지정된 keyTimes 사이에서 애니메이션 된다.
discrete 애니메이션에서도, 첫번째 값은 0 이어야 한다. 애니메이션 기능은 keyTimes 목록의 다음 시간값까지 각 단계의 값을 사용한다.
calcMode 속성이 paced로 설정되어 있으면 keyTimes 값은 무시된다.
t:ANIMATEMOTION 엘레멘트에서 keyTimes을 사용할 때, calcMode 애트리뷰트에 paced 이외의 값을 설정하여야 한다.
| 개체 | script | HTML | 규격 | IE |
|---|
이 속성은 (영문)SMIL 2.0(Synchronized Multimedia Integration Language)에서 정의되었다.
keySplines 속성은 애니메이션되는 간격을 정의하는 Bezier 제어점들의 목록이다.
keyTimes 속성은 애니메니션 진행 간격의 시간값들의 목록이다.
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time{ behavior: url(#default#time2);}
.div1{position:relative; top:0px; height:50px; width:100px; background-color:yellow; text-align:center; font-size:16px;
border:solid 2 red;color:blue;padding:5px}
</STYLE>
</HEAD>
<BODY>
aniObj.currTimeState.simpleTime=
<SPAN id="Timer1" class="time" dur=".1" repeatCount="indefinite" fill="hold"
onrepeat="innerText=(aniObj.currTimeState.simpleTime);">0</SPAN><BR>
aniObj.currTimeState.activeTime=
<SPAN id="Timer2" class="time" dur=".1" repeatCount="indefinite" fill="hold"
onrepeat="innerText=(aniObj.currTimeState.activeTime);">0</SPAN>
<DIV id="divObj" class="div1"> keyTimes 과 keySplines</DIV>
<T:animateMotion id="aniObj" begin="1;butObj.click+1" dur="6s" autoReverse="true" targetElement="divObj" fill="hold"
calcMode="spline" keySplines="0 1 .5 1;.5 1 0 1" keyTimes="0;.5;1" values="0,0;250,100;400,-150" />
<P><BUTTON id="butObj">다시 시작</BUTTON></P>
</BODY>
</HTML>