ִϸ̼ ܰ Bezier Ʈ ȯϰų Ѵ.

μ
: (Ӽ ڿ)

Ӽ ִϸ̼ ܰ Bezier Ʈ Ÿ ڿ̴.

ڿ keyTimes Ͽ Bezier Ʈ ݷ(;) иѴ.
Bezier ð ׸Ʈ Ͽ װ εҼ ġ Ǹ Ʒ .

x1 ó Ʈ x Ÿ 0 1 εҼ̴.
y1 ó Ʈ y Ÿ 0 1 εҼ̴.
x2 ι° Ʈ x Ÿ 0 1 εҼ̴.
y2 ι° Ʈ y Ÿ 0 1 εҼ̴.

Ӽ б/̸ Ʈ .

Ư

ð ƮƮ Ÿ keyTimes ִϸ̼ ð 帧  ̷° ϴ Bezier Ŀ ̴. keySplines (spline) ̴. keyTimes 麸ٴ ´.

keySplines calcMode Ӽ spline Ǿ õȴ.

üscriptHTML԰IE
HTML+time, keyTimes

Ӽ ()SMIL 2.0(Synchronized Multimedia Integration Language) ǵǾ.


aniObj.currTimeState.simpleTime= 0
aniObj.currTimeState.activeTime= 0
keyTimes keySplines

keySplines Ӽ ִϸ̼ǵǴ ϴ Bezier ̴.
keyTimes Ӽ ִϸ޴ϼ ð ̴.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time{ behavior: url(#default#time2);}
.div1{position:relative; top:0px; height:50px; width:100px; background-color:yellow; text-align:center; font-size:16px;
  border:solid 2 red;color:blue;padding:5px}
</STYLE>
</HEAD>
<BODY>
aniObj.currTimeState.simpleTime=
<SPAN id="Timer1" class="time" dur=".1" repeatCount="indefinite" fill="hold"
  onrepeat="innerText=(aniObj.currTimeState.simpleTime);">0</SPAN><BR>
aniObj.currTimeState.activeTime=
<SPAN id="Timer2" class="time" dur=".1" repeatCount="indefinite" fill="hold"
  onrepeat="innerText=(aniObj.currTimeState.activeTime);">0</SPAN>

<DIV id="divObj" class="div1"> keyTimes  keySplines</DIV>
<T:animateMotion id="aniObj" begin="1;butObj.click+1" dur="6s" autoReverse="true" targetElement="divObj" fill="hold"
  calcMode="spline" keySplines="0 1 .5 1;.5 1 0 1" keyTimes="0;.5;1" values="0,0;250,100;400,-150" />
<P><BUTTON id="butObj">ٽ </BUTTON></P>
</BODY>
</HTML>