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

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/Library/Effects/JSTween へ行く。
• JavaScript/Library/Effects/JSTween の差分を削除

 &pgid();
 
 
 #contents();
 
 #blikimore
 
 ** 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]]