アークウェブシステム開発SandBox

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• JavaScript/Library/Effects/JSTween へ行く。
  • 1 (2007-11-26 (月) 12:48:54)

JavaScript/Library/Effects/JSTween

JAVASCRIPT MOTION TWEEN †

http://jstween.blogspot.com/

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などの単位が指定できます

用意されている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
戻り値: 新しい値

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

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

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

• 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の直前でも呼ばれます

Parallel †

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

使い方 †

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オブジェクト内のみ

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

• onMotionStarted( eventObject )
• onMotionFinished( eventObject )
• onMotionStopped( 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を登録できます　登録した順に一つずつ実行されます

tag: Effects?, JavaScript, Tween?