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

애니메이션을 시작 값을 반환하거나 설정한다.

인수

: (속성 값)

속성값은 애니메이션을 시작 값이다.

시작값은 px, in, cm, mm, pt, pc등의 길이 단위를 포함할 수 있다.
자세한 정보는 CSS 길이 단위를 참조하라.

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

특기

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

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

<SCRIPT>
object.endElement();
object.from='100px';
object.beginElement();
</SCRIPT>

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

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

활성중인 애니메이션에서 from를 from 속성값으로 스크립트로 수정하려면:

<SCRIPT>
object.endElement();
object.path=null;
object.from='100px';
object.beginElement();
</SCRIPT>

적용

개체	script	HTML	규격	IE

참조

HTML+time, by, from, to

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

이동 DIV

결과 표시창

<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.attributeName='+aniObj.attributeName+'<BR>';
  str+='aniObj.from='+aniObj.from+'<BR>';
  str+='aniObj.to='+aniObj.to+'<BR>';
  str+='aniObj.targetElement='+aniObj.targetElement+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
</HEAD>
<BODY>
<T:ANIMATE id="aniObj" autoReverse="true" begin="2"
  targetElement="divObj" attributeName="left" from="100px" dur="5" to="300px" fill="hold"/>
<DIV id="divObj" class="time"
  style="position:absolute;left:100;background-color:beige;color:red;border:solid 1 red;padding:9">이동 DIV</DIV>
<BUTTON onclick="aniObj.beginElement()" style=margin-top:50>다시 시작</BUTTON>
<BUTTON onclick="showAll()">내역 보기</BUTTON>
<DIV id=showA>결과 표시창</DIV>
</BODY>
</HTML>