&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

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