t:ANIMATECOLOR 엘레멘트의 세미콜론(;)으로 분리된 RGB 식상값들의 목록으로 반환하거나 설정한다.

ScriptanimateColor.values(val)=[vVal]
HTML<T:ANIMATECOLOR values="vVal">
인수
vVal : (속성 문자열)

values 속성값은 t:ANIMATECOLOR 엘레멘트의 세미콜론(;)으로 분리된 RGB 식상값들의 목록을 나타내는 문자열이다.

값들은 나타난 순서에따라 애니메이션이 일어나는 순서를 결정하고 적용된다.

이 속성은 읽기/쓰기이며 디폴트값은 없다.

특기

애니메이션의 valuesattributeName 속성에 유효한 값이어야 한다. 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, animateMotionanimateColor 개체들에서는, HTML time2 비헤이버가 사용되어 어느 속성이 애니메이션되는가를 판정하는 모드가 사용된다.

적용
개체scriptHTML규격IE
animateColoranimateColor.values[=vVal]<t:ANIMATECOLOR values="vVal">없음IE5.5(win32)
참조
HTML+time begin by clacMode dur fill from targetElement to values 색상표

property
values 속성
values</b> 속성이전페이지로페이지 맨위로페이지 맨아래로
div1Obj
div2Obj
ani1Obj.values=undefined
ani2Obj.values=undefined

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>
property
values 속성
견본
이전페이지로페이지 맨위로
최종 수정:
07/03/2025 14:38:46
KoXo Homepage
All right reserved
비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다.
오류가 나면 정상적 접속으로 시도해 보세요.
http://koxo.com/lang/js/property/values_animateColor.html