t:ANIMATECOLOR 엘레멘트의 세미콜론(;)으로 분리된 RGB 식상값들의 목록으로 반환하거나 설정한다.
![]() | Script | animateColor.values(val)=[vVal] |
HTML | <T:ANIMATECOLOR values="vVal"> |
values 속성값은 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 |
---|---|---|---|---|
animateColor | animateColor.values[=vVal] | <t:ANIMATECOLOR values="vVal"> | 없음 | IE5.5(win32) |
![]() | values 속성⇒ | ![]() | ![]() ![]() ![]() |
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>
![]() | values 속성 | ⇒ | ![]() ![]() |
최종 수정: 07/03/2025 14:38:46 | ![]() All right reserved | 비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요. | http://koxo.com/lang/js/property/values_animateColor.html |