애니메니트 색상 애트리뷰트나 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 비헤이버를 사용하고 다음의 모델에 의하여 애니메이션 속성들을 평가한다.
| 개체 | script | HTML | 규격 | IE |
|---|
두개의 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>