KoXo 자바스크립트 - 속성(property) - to | to (t:animate, t:animateColor, t:animatemotion, ...) (time)

애니메이션의 종료값을 반환하거나 설정한다.

인수

: (속성 문자열)

속성값은 애니메이션의 종료값을 나타내는 문자열이다.

이 값에는 px, in, cm, mm, pt, pc등의 단위 지정자를 포함할 수 있다.
지원되는 단위는 CSS 단위 참조를 참조하라.

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

특기

by 속성은 동일한 엘레멘트에서 to 속성과 동시에 사용될 수 없다.
두값이 모두 설정되었으면 by 속성값이 무시된다.

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

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

animate, animateMotion과 animateColor 개체는 HTML time2 비헤이버를 사용하고 다음의 모델에 의하여 애니메이션 속성들을 평가한다.

path 속성이 설정되었으면, values, from, to나 by 속성에 지정된 값을 덮어씌운다.
values 속성이 설정되었으면, from, to나 by 속성에 지정된 값을 덮어씌운다.
values나 path 속성이 설정되어 있지 않는 한 from 속성이 사용된다.
to 속성이 지정되면, by 속성으로 설정된 값을 덮어씌운다.
by 속성은 다른 어떤 속성도 덮어씌우지 않는다.

스트립트로 활성 애니메이션의 path 속성으로부터 to 속성값을 변경시키려면

<SCRIPT>
object.endElement();
object.path=null;
object.to='400';
object.beginElement();
</SCRIPT>

적용

개체	script	HTML	규격	IE

참조

HTML+time

이 속성은 (영문)SMIL 2.0(Synchronized Multimedia Integration Language)에서 정의되었다.

이동 개체

결과 표시창

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<IMPORT namespace="t" implementation="#default#time2">
<STYLE>.time{ behavior: url(#default#time2);}</STYLE>
<SCRIPT>
function showAll(){
  str='aniObj.from='+aniObj.from+'<BR>';
  str+='aniObj.to='+aniObj.to+'<BR>';
  str+='aniObj.repeatCount='+aniObj.repeatCount+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:ANIMATE id="aniObj" onbegin="showAll()" repeatCount="3"
  autoReverse="true" targetElement="mvObj" attributeName="left" from="0" to="300" dur="5" fill="hold"/>
<DIV id="mvObj" class="time"
  style="position:relative;top:0;left:0;padding:9;font-size:20pt;background-color:pink;color:red">이동 개체</DIV>
<BUTTON onclick="aniObj.beginElement();showAll()">다시 시작</BUTTON>
<DIV id=showA>결과 표시창</DIV>
</BODY>
</HTML>