¾Ö´Ï¸Þ´ÏÆ® »ö»ó ¾ÖÆ®¸®ºäÆ®³ª t:ANIMATECOLOR ¿¤·¹¸àÆ®ÀÇ ¼Ó¼º°ª¿¡ ÀÇÇÑ »ó´ëÀû ½Ã°£Â÷¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

Àμö
: (¼Ó¼º ¹®ÀÚ¿­)

¼Ó¼º°ªÀº ¾Ö´Ï¸Þ´ÏÆ® »ö»ó ¾ÖÆ®¸®ºäÆ®³ª t:ANIMATECOLOR ¿¤·¹¸àÆ®ÀÇ ¼Ó¼º°ª¿¡ ÀÇÇÑ »ó´ëÀûÀÎ ½Ã°£Â÷(offset )¸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

¿¤·¹¸àÆ®ÀÇ »ö»ó ¼Ó¼ºµéÀ» ¾Ö´Ï¸ÞÀ̼ÇÇϴµ¥ »ç¿ëµÇ´Â »ó´ëÀûÀÎ °ªÀ¸·Î ¿¤·¹¸àÆ®³ª ¼Ó¼ºÀÇ Â÷ÀÌ°ªÀÌ´Ù.

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

Ư±â

by ¼Ó¼ºÀº ÇÑ ¿¤·¹¸àÆ®¿¡¼­ to ¼Ó¼º°ú °°ÀÌ »ç¿ëµÉ ¼ö ¾ø´Ù. µÎ°¡Áö°¡ ¼³Á¤µÇ¸é by ¼Ó¼º°ªÀº ¹«½ÃµÈ´Ù. ±×·¯³ª from ¼Ó¼ºÀ» »ç¿ëÇÏ¿© ¾Ö´Ï¸ÞÀ̼ÇÀÇ ÃÖÃÊ°ª ¼³Á¤Àº ¼±ÅÃÀûÀÌ´Ù.

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

¾Ö´Ï¸Þ´Ï¼Ç °úÁ¤ Áß¿¡ by ¼Ó¼º¿¡ Â÷ÀÌ(offset) »ö°ªÀ» ¼³Á¤ÇÏ¿© ¸ñÇ¥ ¿¤·¹¸àÆ®ÀÇ »ö»ó°ªÀ» º¯°æ½Ãų ¼ö ÀÖ´Ù. ÀÌ Â÷ÀÌ°ªÀº ½ÇÁ¦ÀûÀ¸·Î ¸ñÇ¥ ¿¤·¹¸àÆ®ÀÇ »ö»ó°ª°ú ¼Ó¼º°ªÀÇ ÇÕ»ê°ú °°´Ù. ¾Ö´Ï¸ÞÀÌ¼Ç ¸ñÇ¥ ¾ÖÆ®¸®ºäÆ®¿¡ from ¼Ó¼ºÀ¸·Î ¼³Á¤µÈ ½ÃÀÛƒ„ÀÌ ÀÖÀ¸¸é, ¸ñÇ¥ ¾ÖÆ®¸®ºäÆ®ÀÇ Á¾·á°ªÀº from°ú by ¼Ó¼º°ªµéÀÇ ÇÕ°è¿Í °°´Ù.

from ¼Ó¼º ¼³Á¤ ¾øÀÌ by ¼Ó¼ºÀÌ ¼³Á¤µÇ¾úÀ¸¸é, ¾Ö´Ï¸ÞÀ̼ÇÀº Ãß°¡ÀûÀ¸·Î Á¤ÀǵǸç, ¼³Á¤µÈ additive ¼Ó¼º°ªÀ» µ¤¾î¾º¿î´Ù.

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

<SCRIPT>
object.endElement();
object.by='150';
object.beginElement();
</SCRIPT>

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

Àû¿ë
°³Ã¼scriptHTML±Ô°ÝIE
ÂüÁ¶
color backgroundColor 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>