&pgid();


#contents();


** JAVASCRIPT MOTION TWEEN [#ve81a46c]
http://jstween.blogspot.com/

* Tween [#j752fc16]
** 使い方 [#f48465c8]
 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 [#n646ffcb]
これらはアニメーションのタイプを表します(ページの最後にサンプルがあります)
名前の最初がエフェクトのタイプを表します
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
戻り値: 新しい値

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

** 用意されているイベント [#i4955ae4]
- 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 [#xb34d5c0]
複数のtweenオブジェクトを登録しておき、同時に実行します

** 使い方 [#eef25614]
 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オブジェクト内のみ

** 用意されているイベント [#gf290332]
- 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を登録できます 登録した順に一つずつ実行されます



// 参考:[[jQuery 開発者向けメモ - リファレンス>http://www.mikage.to/jquery/jquery_ref.html]]

// #blikifooter(進地)

tag: [[Effects>tag/Effects]], [[JavaScript>tag/JavaScript]], [[Tween>tag/Tween]]


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら