Tween †

使い方 †

new Tween(object, property, easing, start, end, duration, suffixe);

object
　アニメーションさせるオブジェクトを指定します
　element.styleなどと指定します
　object[property]=　で値を書き換えてアニメーションをしているのでこの記述のできるブラウザで実行可能
property 　アニメーションさせるプロパティを指定します
　element.styleの場合leftやheightなどと指定します
　複数指定することはできないようです
easing
　アニメーションのタイプを指定します
　nullを指定すると常に一定の変量でアニメーションんします
start
　アニメーションの開始値を指定します
end
　アニメーションの終了値を指定します
duration
　アニメーションに要する時間を秒単位で指定します
suffixe
　startとendに指定した値の単位を指定します
　px,emなどの単位が指定できます

↑

[edit]

用意されているeasing †

これらはアニメーションのタイプを表します(ページの最後にサンプルがあります)
名前の最初がエフェクトのタイプを表します
Ease以降がエフェクトの位置を表します
　EaseIn: アニメーション開始時にエフェクトが付きます
　EaseOut: アニメーション終了時にエフェクトが付きます
　EaseInOut: アニメーション開始時と終了時にエフェクトが付きます

Tween.regularEaseIn
　少しずつ速くなります
Tween.regularEaseOut
　少しずつ遅くなります
Tween.regularEaseInOut
　少しずつ速くなった後徐々に遅くなります
Tween.strongEaseIn
　少しずつ速くなります
　regularよりも速さが強調されます
Tween.strongEaseOut
　少しずつ遅くなります
　regularよりも速さが強調されます
Tween.strongEaseInOut
　少しずつ速くなった後徐々に遅くなります
　regularよりも速さが強調されます
Tween.backEaseOut
　少しずつ遅くなりながら終了値から一旦行き過ぎたあとに終了値で停止します
Tween.backEaseIn
　少しずつ速くなりながら開始値から一旦逆方向に向かった後終了値に向かいます
Tween.backEaseInOut
　少しずつ速くなりながら開始値から一旦逆方向に向かった後終了値に向かって徐々に遅くなりながら終了値を一旦行き過ぎた後終了値で停止します
Tween.bounceEaseOut
　少しずつ遅くなりながら終了値に達した後バウンスします
　終了値を行き過ぎることはありません
Tween.bounceEaseIn
　少しずつ速くなりながら開始値でバウンスしたあと終了値に向かいます
　開始値から逆方向に向かうことはありません
Tween.bounceEaseInOut
　少しずつ速くなりながら開始値でバウンスした後徐々に遅くなりながら終了値に向かい終了値に達したあとバウンスします
　開始値から逆方向に向かったり終了値を行き過ぎたりすることはありません
Tween.elasticEaseIn
　少しずつ速くなりながら開始値の前後を振動して終了値に向かいます
Tween.elasticEaseOut
　少しずつ遅くなりながら終了値の前後を振動して終了値で停止します
Tween.elasticEaseInOut
　少しずつ速くなりながら開始値の前後を振動して終了値に向かい、終了値の前後を振動して終了値で停止します

これらは関数です
easingの引数は(t, b, c, d)です
t: アニメーション開始からの経過時間
b: 開始値
c: 終了値と開始値との差
d: duration
戻り値: 新しい値

↑

[edit]

用意されているメソッド †

start()
　アニメーションを開始します
rewind()
　アニメーションをリセットします
fforward()
　アニメーション終了時の状態まで強制的に移行します
stop()
　アニメーションを一時停止します
resume()
　一時停止したアニメーションを再開します
continueTo( end, duration )
　現在位置をstartとしてendまでdurationの時間で移動します
　コンストラクタで指定したstartとdurationを上書きします
yoyo()
　startをendとしてcontinueToを呼び出します
　前の位置までアニメーションしながら戻ります(easingは変わらないので巻き戻しとは違うようです)
addListener( listenerObject )
　tweenオブジェクトにイベントを追加します
removeListener( listenerObject )
　tweenオブジェクトからイベントを除去します

↑

[edit]

用意されているイベント †

onMotionStarted( eventObject )
onMotionChanged( eventObject )
onMotionFinished( eventObject )
onMotionStopped( eventObject )
onMotionLooped( eventObject )
onMotionResumed( eventObject )

関数なのでvar t=new Tween()などした後にt.onMotionStarted=functionのようにして指定します
eventObjectはeventObject.targetとeventObject.typeを持つオブジェクトです
tartgetはtweenオブジェクトです　typeはイベントタイプです(onMotionFinishedなどの文字列)
addListenerを使う場合はobject.onMotionStarted=function　のように関数を持たせたオブジェクトをaddListenerの引数に渡します
addListenerを使うと複数のeventObjectを登録できます　登録した順に一つずつ実行されます
onMotionChangedはアニメーションが更新される度に呼ばれます
onMotionStoppedはstop()が呼ばれた時に呼ばれますが、rewind()と終了処理でstop()を呼び出しているのとstart ()が内部でrewind()を呼び出している関係でrewind()を呼んだ時、onMotionStartedの直前、 onMotionFinishedの直前でも呼ばれます

↑

[edit]

Parallel †

複数のtweenオブジェクトを登録しておき、同時に実行します

↑

[edit]

使い方 †

new Parallel();

用意されているメソッド

addChild(tween)
　tweenオブジェクトを登録します　(登録の解除はできません)
start()
　登録されたすべてのオブジェクトのstart()をコールします
　その後onMotionStartedイベントを実行します
stop()
　登録されたすべてのオブジェクトのstop()をコールします
　その後onMotionStoppedイベントを実行します
rewind()
　登録されたすべてのオブジェクトのrewind()をコールします
fforward()
　登録されたすべてのオブジェクトのfforward()をコールします
resume()
　登録されたすべてのオブジェクトのresume()をコールします
　その後onMotionResumedイベントを実行します
yoyo()
　登録されたすべてのオブジェクトのyoyo()をコールします
addListener( listenerObject )
　Tween.jsのaddListener()と同様
　登録先はparallelオブジェクト内のみ
removeListener( listenerObject )
　Tween.jsのremoveListener()と同様
　登録先はparallelオブジェクト内のみ