t:ANIMATECOLOR¿¡ ÀÇÇÏ¿© ÁøÇàµÇ´Â ¾Ö´Ï¸ÞÀÌ¼Ç Á¾·áÀÇ »ö»ó°ªÀ̳ª Á¾·á ¼Ó¼ºÀ» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

Àμö
: (¼Ó¼º °ª)

¼Ó¼º°ªÀº t:ANIMATECOLOR¿¡ ÀÇÇÏ¿© ÁøÇàµÇ´Â ¾Ö´Ï¸ÞÀÌ¼Ç Á¾·áÀÇ »ö»ó°ªÀ̳ª Á¾·á ¼Ó¼ºÀ» ³ªÅ¸³»´Â °ªÀÌ´Ù.

ÀÌ ¼Ó¼ºÀº Àбâ/¾²±âÀÌ¸ç µðÆúÆ®°ªÀº ¾ø´Ù.

Ư±â

by ¼Ó¼ºÀº to ¼Ó¼º°ú µ¿ÀÏÇÑ ¿¤·¹¸àÆ®¿¡¼­ »ç¿ëµÉ ¼ö ¾ø´Ù. µÎ°ªÀÌ ¸ðµÎ ¼³Á¤µÇ¾úÀ¸¸é by ¼Ó¼º°ªÀÌ ¹«½ÃµÈ´Ù.

t:ANIMATECOLOR¿¡¼­ À¯È¿ÇÑ ¾ÖÆ®¸®ºäÆ®°ªÀº 16Áø¼ö RGB »ö»ó°ªÀ̳ª »ö»ó°ª Å°¿öµå·Î ¿¹¸¦µé¾î #0000ff ȤÀº blueÀÌ´Ù. Ãß°¡ÀûÀÎ Á¤º¸´Â »ö»óÇ¥¸¦ ÂüÁ¶Ç϶ó.

from ¼Ó¼º°ª ¼³Á¤ ¾øÀÌ to ¼Ó¼º°ªÀ» ¼³Á¤Çϸé, ¼³Á¤µÈ additive ¼Ó¼º°ª¿¡ ¿µÇâÀ» ÁÙ ¼ö ÀÖ´Ù..

È°¼º ÁßÀÎ ¾Ö´Ï¸ÞÀ̼ǿ¡¼­ ¼Ó¼ºµéÀ» ½ºÆ®¸³Æ®¸¦ »ç¿ëÇÏ¿© ź·ÂÀûÀ¸·Î º¯°æ½ÃÅ°·Á¸é, Á¦ÀÛÀÚ´Â ¸î°¡Áö ÁÖÀÇÇÏ¿©¾Æ ÇÑ´Ù. È°¼º ¾Ö´Ï¸ÞÀ̼ÇÀÇ ¼Ó¼º°ªµéÀ» º¯°æÇÏ¿© ¹ß»ý ÇÒ ¼ö ÀÖ´Â ½ÃµµÇÏÁö ¾ÊÀº °á°ú¸¦ ÇÇÇϱâ À§ÇÏ¿©, ¾Ö´Ï¸ÞÀ̼ÇÀ» beginElement ¸Þ¼­µå¸¦ »ç¿ëÇÏ¿© ´Ù½Ã ½ÃÀÛÇÑ´Ù. ¿¹¸¦µé¸é

<SCRIPT>
object.endElement();
object.to='#ffffaa';
object.beginElement();
</SCRIPT>

animate, animateMotion°ú animateColor °³Ã¼´Â HTML time2 ºñÇìÀ̹ö¸¦ »ç¿ëÇÏ°í ´ÙÀ½ÀÇ ¸ðµ¨¿¡ ÀÇÇÏ¿© ¾Ö´Ï¸ÞÀÌ¼Ç ¼Ó¼ºµéÀ» Æò°¡ÇÑ´Ù.

Àû¿ë
°³Ã¼scriptHTML±Ô°ÝIE
ÂüÁ¶
HTML+time begin by clacMode dur fill from targetElement to values »ö»óÇ¥

t:ANIMATECOLORÀÇ from, ¼Ó¼º ¿¹Á¦

¿ÜºÎ DIV


³»ºÎ DIV

°á°ú Ç¥½Ãâ

µÎ°³ÀÇ t:ANIMATECOLOR ¿¤·¹¸àÆ®°¡ °¢°¢ div ¿¤·¹¸àÆ®ÀÇ backgroundColor¸¦ º¯°æ½ÃÅ°¸ç, ³»ºÎ DIVÀº ¹è°æ»öÀÌ ¿¬ÃÊ·Ï¿¡¼­ ³ë¶ûÀ¸·Î, DIV ¿ÜºÎ Àº ³ë¶û¿¡¼­ ¿¬ÃÊ·ÏÀ¸·Î ¾Ö´Ï¸ÞÀ̼ǵȴÙ.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time {behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
<SCRIPT>
function showAll(obj){
  objid=obj.id;
  str=objid+'.attributeName='+obj.attributeName+'<BR>';
  str+=objid+'.from='+obj.from+'<BR>';
  str+=objid+'.to='+obj.to+'<BR>';
  str+=objid+'.targetElement='+obj.targetElement+'<BR>';
  str+=objid+'.begin='+obj.begin+'<BR>';
  str+=objid+'.dur='+obj.dur+'<BR>';
  str+=objid+'.fill='+obj.fill+'<BR>';
  str+=objid+'.calcMode='+obj.calcMode+'<BR>';
  if (objid=='ac1Obj') str+='outerDIV.style.backgroundColor='+outerDIV.style.backgroundColor+'<BR>';
  else str+='innerDIV.style.backgroundColor='+innerDIV.style.backgroundColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:PAR id="parObj" begin="0" dur="15" fill="hold">
<T:ANIMATECOLOR id="ac1Obj" attributeName="background-color" from="yellow" to="lightgreen"
  targetElement="outerDIV" begin="0" dur="5" fill="hold"/>
<DIV id="outerDIV" class="time"
  style="font-size:18;left:100;border:solid 3 red;position:absolute;width:400;height:200;
    background-color:red;text-align:center;padding:9">¿ÜºÎ DIV</DIV><BR><BR>

<T:ANIMATECOLOR id="ac2Obj" attributeName="background-color" from="lightgreen" to="yellow"
  targetElement="innerDIV" begin="0" dur="5" fill="hold"/>
</T:PAR>
<DIV id="innerDIV" class="time"
  style="font-size:18;left:150;border:dotted 3 blue;position:absolute;width:300;height:100;
    background-color:blue;text-align:center;padding:9">³»ºÎ DIV</DIV>
<P style=margin-top:190></P>
<BUTTON onclick="parObj.beginElement()">´Ù½Ã ½ÃÀÛ</BUTTON>
<BUTTON onclick="showAll(ac1Obj)">¿ÜºÎ ³»¿ë º¸±â</BUTTON>
<BUTTON onclick="showAll(ac2Obj)">³»ºÎ ³»¿ë º¸±â</BUTTON>
<DIV id=showA>°á°ú Ç¥½Ãâ</DIV>
</BODY>
</HTML>