KoXo 자바스크립트 - 개체(object) - t:ANIMATEMOTION

엘레멘트의 부분을 시간에따라 애니메이션시킨다.

	Script	[propVal=]..propName;
	HTML	propName="propVal">innerString

특기

개체의 애니메이션 스타일 속성과 연관 속성들은 초기화 되어야 한다.
애니메이트할 때 top이나 left 속성들은 position와 함께 초기화해야 된다.

접두어 t:는 엘레멘트와 연관된 XML(Extensible Markup Language)의 이름자리(namespace)로 사용된다.
이 엘레멘트를 사용할 때는 html 태그에 XML의 namespace를 선언하여야 한다.

<HTML xmlns:t ="urn:schemas-microsoft-com:time">

다음 태그 정의 HTML time2 비헤이버를 import를 사용하여 도입하여야 한다.

<IMPORT namespace="t" implementation="#default#time2">

스크립트를 사용하여 활동 애니메이션의 속성들을 탄력적으로 변경시킬 때 예상치 못한 결과를 초래할 수 있으므로, 속성을 변경시킨 후에는 beginElement 메서드로 애니메이션을 다시 시작하는 것이 좋다.

<SCRIPT>
object.endElement();
object.path="M 0 0 L 100 100";
object.beginElement();
</SCRIPT>

관련 속성들은 window.onload 이벤트가 발생될 때까지는 스크립트를 통하여 접속할 수 없다. 문서가 완전히 로딩되어 페이지의 해당 엘레멘트에 관련된 비헤비어들이 모두 적용된 것을 확인할 때까지 기다려서 이벤트가 발생되면, 모든 비헤이버의 속성, 메서드, 이벤트들이 스트립트로 사용될 수 있다. window.onload 이벤트 발생 전에 이들을 사용하는 것은 그 요소가 지원되지 않는다는 스크립트 오류를 발생시킨다.

animate, animateMotion과 animateColor 개체들에서 time2 비헤이버는 어느 속성을 애니메이션할 것인가를 판정하는데 다음 모델을 사용한다.

values 속성이 지정되어 있으면, from, to나 by 속성들을 덮어 씌운다.
values 이나 path 속성이 지정되지 않았으면 from 속성이 사용된다.
to 속성이 지정되었으면 by 속성을 덮어 씌운다.
by 속성은 다른 속성을 덮어 씌우지 않는다.

활성 애니메이션에서 스크립트로 path를 values 속성으로 변경하는 예제.

<SCRIPT>
object.endElement();
object.path=null;
object.values="100,100;0,0";
object.beginElement();
</SCRIPT>

이 엘레멘트는 표현되지 않는다.

이 엘레멘트는 종료태그를 필요로 한다.

참조

animate, animateColor, HTML+time, set

이 개체는 (영문) SMIL 2.0(Synchronized Multimedia Integration Language)에 정의되었다.

설명을 위한 예제

이동 개체

예제의 t:ANIMATEMOTION 엘레멘트는 div 개체를 이동시킨다.

개체	설명	결과	참고
currTimeState	HTML+time timeline에 대한 정보를 포함하는 개체이다.
currTimeState	<SCRIPT>document.write(oObj.currTimeState.isActive)</SCRIPT>

accelerate 속성 IE (accelerate="iVal"> 애트리뷰트)
⇒ 개체의 시간의 가속에 적용되는 값을 반환하거나 지정한다.

문법: .accelerate[=sVal]

코드: document.write(oObj.accelerate); 결과:

accumulate 속성 IE (accumulate="sVal"> 애트리뷰트)
⇒ 애니메이션이 누적되는가를 나타내는 값을 반환하거나 지정한다.

문법: .accumulate[=sVal]

코드: document.write(oObj.accumulate); 결과:

additive 속성 IE (additive="sVal"> 애트리뷰트)
⇒ 애니메이션이 다른 애니메이션의 추가분인가를 나타내는 값을 반환하거나 지정한다.

문법: .additive[=sVal]

코드: document.write(oObj.additive); 결과:

autoReverse 속성 IE (autoReverse="bVal"> 애트리뷰트)
⇒ 개체의 시간의 정방향 진행후 역방향 진행을 할 것인가를 반환하거나 지정한다.

문법: .autoReverse[=sVal]

코드: document.write(oObj.autoReverse); 결과:

begin 속성 IE (begin="tVal"> 애트리뷰트)
⇒ 개체를 플레이하는데 시작되는 지연시간을 반환하거나 지정한다.

문법: .begin[=sVal]

코드: document.write(oObj.begin); 결과:

by 속성 IE (by="vVal"> 애트리뷰트)
⇒ 애니메이션의 상대적인 오프셋(offset) 값을 반환하거나 지정한다.

문법: .by[=vVal]

코드: document.write(oObj.by); 결과:

calcMode 속성 IE (calcMode="sVal"> 애트리뷰트)
⇒ 애니메이션의 계산 모드를 반환하거나 지정한다.

문법: .calcMode[=sVal]

코드: document.write(oObj.calcMode); 결과:

decelerate 속성 IE (decelerate="sVal"> 애트리뷰트)
⇒ 개체의 단순 지속의 끝을 선언한 값을 반환하거나 지정한다.

문법: .decelerate[=sVal]

코드: document.write(oObj.decelerate); 결과:

dur 속성 IE (dur="tVal"> 애트리뷰트)
⇒ 개체가 활성화되거나 디스플레이되는 지속 시간을 반환하거나 지정한다.

문법: .dur[=tVal]

코드: document.write(oObj.dur); 결과:

end 속성 IE (end="tVal"> 애트리뷰트)
⇒ 개체가 반복하도록 설정되었을 때 종료까지나 단순 지속의 시간을 반환하거나 지정한다.

문법: .end[=tVal]

코드: document.write(oObj.end); 결과:

fill 속성 IE (fill="sVal"> 애트리뷰트)
⇒ 모체 엘레멘트의 시간이 종료되기 전에 애니메이션 시간이 종료되면 취할 조치를 반환하거나 지정한다.

문법: .fill[=sVal]

코드: document.write(oObj.fill); 결과:

from 속성 IE (from="sVal"> 애트리뷰트)
⇒ 애니메이션의 시작값을 반환하거나 지정한다.

문법: .from[=sVal]

코드: document.write(oObj.from); 결과:

hasMedia 속성 IE
⇒ 애니메이션이 HTML+time 메디어(media) 개체를 가지고 있는가를 반환한다.

문법: .hasMedia[=bVal]

코드: document.write(oObj.hasMedia); 결과:

keySplines 속성 IE (keySplines="vVal"> 애트리뷰트)
⇒ 애니메이션의 간격에 정의된 Bezier 제어점 설정을 반환하거나 설정한다.

문법: .keySplines[=vVal]

코드: document.write(oObj.keySplines); 결과:

keyTimes 속성 IE (keyTimes="sVal"> 애트리뷰트)
⇒ 애니메이션의 간격의 제어에 사용된 시간값들의 목록을 반환하거나 설정한다.

문법: .keyTimes[=sVal]

코드: document.write(oObj.keyTimes); 결과:

origin 속성 IE (origin="sVal"> 애트리뷰트)
⇒ 애니메이션의 움직임의 원천을 반환하거나 지정한다.

문법: .origin[=sVal]

코드: document.write(oObj.origin); 결과:

path 속성 IE (path="sVal"> 애트리뷰트)
⇒ 시간 기능의 경로를 지정하는 값을 반환하거나 지정한다.

문법: .path[=sVal]

코드: document.write(oObj.path); 결과:

repeatCount 속성 IE (repeatCount="iVal"> 애트리뷰트)
⇒ 애니메이션의 반복 횟수를 목록을 반환하거나 설정한다.

문법: .repeatCount[=iVal]

코드: document.write(oObj.repeatCount); 결과:

repeatDur 속성 IE (repeatDur="sVal"> 애트리뷰트)
⇒ 애니메이션의 반복의 시간을 초단위나 문자열로 반환하거나 설정한다.

문법: .repeatDur[=sVal]

코드: document.write(oObj.repeatDur); 결과:

restart 속성 IE (restart="sVal"> 애트리뷰트)
⇒ 애니메이션이 어떤 상황에서 다시 시작할 것인가를 반환하거나 설정한다.

문법: .restart[=sVal]

코드: document.write(oObj.restart); 결과:

speed 속성 IE (speed="fVal"> 애트리뷰트)
⇒ 모체의 시간용기에 상대적으로 애니메이션의 플레이 속도를 부동소수점 수치로 반환하거나 설정한다.

문법: .speed[=fVal]

코드: document.write(oObj.speed); 결과:

systemBitrate 속성 IE (systemBitrate="speedVal"> 애트리뷰트)
⇒ 시스템의 대략적 밴드폭을 bps(bits-per-second) 단위로 반환한다.

문법: [sVal=].systemBitrate

코드: document.write(oObj.systemBitrate); 결과:

systemCaptions 속성 IE (systemCaptions="sVal"> 애트리뷰트)
⇒ 디스플레이되는 텍스트가 플레이되는 오디오 부분에 해당하는가를 나타내는 값을 반환한다.

문법: [sVal=].systemCaptions

코드: document.write(oObj.systemCaptions); 결과:

systemLanguage 속성 IE (systemLanguage="sVal"> 애트리뷰트)
⇒ 사용자가 시스템에 설정한 선호 언어를 반환한다.

문법: [sVal=].systemLanguage

코드: document.write(oObj.systemLanguage); 결과:

systemOverdubOrSubtitle 속성 IE (systemOverdubOrSubtitle="sVal"> 애트리뷰트)
⇒ 개체를 플레이할 때 작은 제목들을 표현할 것인가를 반환한다.

문법: .systemOverdubOrSubtitle[=sVal]

코드: document.write(oObj.systemOverdubOrSubtitle='overdub'); 결과:

targetElement 속성 IE (targetElement="oVal"> 애트리뷰트)
⇒ 애니메이션의 목표 엘레멘트를 반환하거나 설정한다.

문법: .targetElement[=oVal]

코드: document.write(oObj.targetElement); 결과:

timeContainer 속성 IE (timeContainer="sVal"> 애트리뷰트)
⇒ 엘레멘트와 연관된 애니메이션의 종류를 반환하거나 설정한다.

문법: .timeContainer[=sVal]

코드: document.write(oObj.timeContainer); 결과:

timeParent 속성 IE
⇒ 현재의 엘레멘트를 포함하는 모체 시간 용기를 반환한다.

문법: .timeParent[=sVal]

코드: document.write(oObj.timeParent); 결과:

to 속성 IE (to="sVal"> 애트리뷰트)
⇒ 애니메이션의 종료값을 반환하거나 설정한다.

문법: .to[=sVal]

코드: document.write(oObj.to); 결과:

values 속성 IE (values="sVal"> 애트리뷰트)
⇒ 애니메이션의 값들의 세미콜론(;)으로 분리된 목록으로 반환하거나 설정한다.

문법: .values[=sVal]

코드: document.write(oObj.values); 결과:

메서드	설명
activeTimeToParentTime	엘레멘트의 활성 시간값을 모체의 시간 포인터에 해당하는 값으로 변환한다.
activeTimeToSegmentTime	엘레멘트의 활성 시간값을 조각(segment) 시간 포인터에 해당하는 값으로 변환한다.
beginElement	엘레멘트의 시간을 시작한다.
beginElementAt	엘레멘트의 시간을 지정한 시간에 시작한다.
documentTimeToParentTime	문서의 시간을 엘레멘트 모체의 시간 포인터에 해당하는 값으로 변환한다.
endElement	엘레멘트의 시간을 종료한다.
endElementAt	엘레멘트의 시간을 지정한 시간에 종료한다.
parentTimeToActiveTime	모체의 시간을 엘레멘트 활성 포인터에 해당하는 값으로 변환한다.
parentTimeToDocumentTime	엘레멘트 모체의 시간을 문서의 시간 포인터에 해당하는 값으로 변환한다.
pauseElement	엘레멘트의 시간을 현 싯점에서 임시 중지한다.
resetElement	엘레멘트에 변경된 내용을 제거하고 원래의 상태로 환원한다.
resumeElement	일시 중시된 엘레멘트의 시간을 계속해서 다시 시작한다.
seekActiveTime	엘레멘트의 활성 시간을 지정된 시간에 맞추고 그 싯점부터 플레이 한다.
seekSegmentTime	엘레멘트의 조각(segment) 시간을 지정된 시간에 맞추고 그 싯점부터 플레이 한다.
seekTo	반복을 포함하여 엘레멘트의 조각 시간을 지정된 시간에 맞추고 그 싯점부터 플레이 한다.
seekToFrame	개체에 있는 프레임에 위치시킨다.
segmentTimeToActiveTime	엘레멘트 조각(segment)의 시간을 엘레멘트 활성시간 포인터에 해당하는 값으로 변환한다.
segmentTimeToSimpleTime	엘레멘트 조각(segment)의 시간을 엘레멘트 단순시간 포인터에 해당하는 값으로 변환한다.
simpleTimeToSegmentTime	엘레멘트 조각의 단순시간을 엘레멘트 조각의 시간 포인터에 해당하는 값으로 변환한다.

개체	설명
onbegin	엘레멘트에서 시간이 시작되면 발생한다.
onend	엘레멘트에서 시간이 중지되면 발생한다.
onpause	엘레멘트에서 시간이 임시멈추면 발생한다.
onrepeat	엘레멘트에서 한 루프의 시간이 완료되고 다시 시작되면 발생한다.
onreset	엘레멘트에서 begin 속성값에 도달하거나 개체에서 resetElement 메서드를 호출하면 발생한다.
onresume	엘레멘트에서 임시중지한 시간이 다시 시작되면 발생한다.
onreverse	엘레멘트에서 시간이 역방향으로 시작되면 발생한다.