t:ANIMATECOLOR 엘레멘트의 세미콜론(;)으로 분리된 RGB 식상값들의 목록으로 반환하거나 설정한다.
속성값은 t:ANIMATECOLOR 엘레멘트의 세미콜론(;)으로 분리된 RGB 식상값들의 목록을 나타내는 문자열이다.
값들은 나타난 순서에따라 애니메이션이 일어나는 순서를 결정하고 적용된다.
이 속성은 읽기/쓰기이며 디폴트값은 없다.
애니메이션의 values는 attributeName 속성에 유효한 값이어야 한다. t:ANIMATECOLOR에서 유효한 값들은 색상의 16진수 RGB 값(예: #ffff00)이나 색상을 나타내는 키워드(예: yellow)들이다. 색상표를 참조하라.
values 속성은 애니메이션에 설정되어 있는 to, from이나 by 속성값들을 속성값은 덮어씌운다.
calcMode 속성은 어떻게 values 애트리뷰트가 해석되는가를 결정한다. calcMode 설정에따라, values 애트리뷰트에 목록화된 값들 사이에 linear, discrete, paced, 나 splined를 지정할 수 있다. 이들 설정은 애니메에션 과정 중에 색상값등 한 값에서 다른 값으로 변경되는 방식을 결정한다. 여기서 변환의 가속이나 감속등도 지정할 수 있다.
스크립트를 사용하여 활성 애니메이션을 탄력적으로 변경시킬 때, 작성자는 몇가지 주의하여야 한다. 결과가 의도한 바와 다르거나 이상하게 되지 않게하기 위해서는, 속성들의 값을 변경한 후 beginElement 메서드를 사용하여 다시 시작하는 것이 좋다.
<SCRIPT> object.endElement(); object.values='cyan;#0000FF'; object.beginElement(); </SCRIPT>
animate, animateMotion과 animateColor 개체들에서는, HTML time2 비헤이버가 사용되어 어느 속성이 애니메이션되는가를 판정하는 모드가 사용된다.
| 개체 | script | HTML | 규격 | IE |
|---|
t:ANIMATECOLOR 엘레멘트의 values 값에따라 색상이
ani1Obj에서는 #0000FF;cyan;lightGreen으로,
ani2Obj에서는 pink;#FF0000;yellow로 순차적으로 각각 5초동안에 애니메니션된다.
<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time {behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<T:PAR id="parObj" begin="0" dur="10" fill="hold">
<T:ANIMATECOLOR id="ani1Obj" targetElement="div1Obj"
attributeName="background-color" values="#0000FF;cyan;lightGreen" begin="0" dur="5" fill="hold"/>
<T:ANIMATECOLOR id="ani2Obj" targetElement="div2Obj"
attributeName="background-color" values="pink;#FF0000;yellow" begin="0" dur="5" fill="hold"/>
</T:PAR>
<DIV id="div1Obj" class="time" style="position:relative;top:0;left:0;width:300;height:200;font-size:18;
background-color:#0000ff;text-align:center;padding:5;border:3 solid yellow">div1Obj</DIV>
<DIV id="div2Obj" class="time" style="position:relative;top:-125;left:50;width:200;height:100;font-size:18;
background-color:pink; text-align:center;padding:5;border:3 dotted aqua">div2Obj</DIV>
<DIV style=position:relative;top:-100;left:10>
<SCRIPT>
document.write('ani1Obj.values='+ani1Obj.values+'<BR>')
document.write('ani2Obj.values='+ani2Obj.values+'<BR>')
</SCRIPT>
</DIV>
<BUTTON onclick="parObj.beginElement()">다시 시작</BUTTON>
</BODY>
</HTML>