애니메이션의 개별 단개를 정의한 Bezier 제어점들의 세트를 반환하거나 설정한다.
속성값은 애니메이션의 개별 단개를 정의한 Bezier 제어점들의 세트를 나타내는 문자열이다.
문자열은 keyTimes 목록에 연관된 Bezier 제어점들의 세트를 세미콜론(;)으로 분리한다.
각 제어점은 Bezier에서 한 시간 세그멘트를 위하여 네개의 부동소수점 수치값들로 구성되며 순서는 아래와 같다.
| x1 | 처음 제어 포인트의 x 축을 나타내는 0과 1 사이의 부동소수점값이다. |
| y1 | 처음 제어 포인트의 y 축을 나타내는 0과 1 사이의 부동소수점값이다. |
| x2 | 두번째 제어 포인트의 x 축을 나타내는 0과 1 사이의 부동소수점값이다. |
| y2 | 두번째 제어 포인트의 y 축을 나타내는 0과 1 사이의 부동소수점값이다. |
이 속성은 읽기/쓰기이며 디폴트값은 없다.
연관 시간 세트멘트를 나타내는 keyTimes 값들은 애니메이션이 시간의 흐름에따라 어떻게 이루어지는가를 지정하는 앏은 판을 위한 Bezier 앤커 점들이다. keySplines 값들은 얇은 판(spline)의 제어점들이다. 따라서 keyTimes 점들보다는 적은 제어점 갯수를 갖는다.
keySplines 값은 calcMode 속성이 spline로 설정되어 있지 않으면 무시된다.
| 개체 | 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>