색상이나 t:ANIMATECOLOR에 의해 애니메이션되는 색상의 시작값을 반환하거나 설정한다.

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

from 속성값은 색상이나 animateColor에 의해 애니메이션되는 색상의 시작값을 나타내는 문자열이다.

색상값은 rrggbb 색상이나 색상명이어야 한다.

이 속성값은 원래의 애트리뷰트나 속성값을 갱신한다.

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

특기

from 값이 지정되지 않았으면, 애니메이션이 시작되는 싯점에서의 목표 애트리뷰트의 값을 사용한다.

t:ANIMATECOLOR에서 유효한 애트리뷰트값은 16진수 RGB 색상값이나 색상값 키워드로 예를들어 #0000ff 혹은 blue이다. 추가적인 정보는 색상표를 참조하라.

활성 중인 애니메이션에서 속성들을 스트립트를 사용하여 탄력적으로 변경시키려면, 제작자는 몇가지 주의하여아 한다. 활성 애니메이션의 속성값들을 변경하여 발생 할 수 있는 시도하지 않은 결과를 피하기 위하여, 애니메이션을 beginElement 메서드를 사용하여 다시 시작한다. 예를들면

<SCRIPT>
object.endElement();
object.from='#7FFFD4';
object.beginElement();
</SCRIPT>

animate, t:ANIMATEMOTION과 t:ANIMATECOLOR 개체에서, HTML time2 비헤이버는 다음과 같은 애니메이션 평가 모드를 사용한다.

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

property ⇒
from 속성⇒
from</b> 속성⇒
예제
이전페이지로페이지 맨위로페이지 맨아래로

t:ANIMATECOLOR의 from, 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>

property ⇒
from 속성⇒
from</b> 속성⇒
견본
이전페이지로페이지 맨위로페이지 맨아래로
property ⇒
from 속성
⇒
견본예제
이전페이지로페이지 맨위로
최종 수정:
05/18/2025 08:03:25		KoXo Homepage
All right reserved		비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다.
오류가 나면 정상적 접속으로 시도해 보세요.		http://koxo.com/lang/js/property/from_animateColor.html