![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- JavaScript/Library/Effects/JSTweener へ行く。
- 1 (2007-11-26 (月) 12:32:49)
JavaScript/Library/Effects/JSTweener
JSTweener †
http://coderepos.org/share/wiki/JSTweener
使い方 †
JSTweener.addTween(element.style, options);
JSTweener.addTweenを呼び出した時点で開始されます
optionsはオブジェクトです
以下のプロパティ(と初期値)を指定できます
- time: 1
- transition: 'easeoutexpo'
- delay: 0
- prefix: {}
- suffix: {}
- onStart: undefined
- onStartParams: undefined
- onUpdate: undefined
- onUpdateParams: undefined
- onComplete: undefined
- onCompleteParams: undefined
さらに変更したいstyleと値を指定できます 例:height: 100
styleの単位は上記のsuffixを使用します 例:suffix: {height: 'px'}
初期値は指定できません 現在位置が初期値として使用されます
プロパティについて †
- time: モーションの開始から終了に要する時間をsecで指定します 内部で1000倍しているので少数を指定することでmsecでの指定もできます
- transition: easingを指定します 関数か文字列(関数名)を指定できます style毎に異なるeasingを指定することはできないようです
- delay: モーション開始までの待ち時間をsecで指定します 内部で1000倍しているので少数を指定することでmsecでの指定もできます
- prefix: suffixと同じ指定方法で、エレメントのプロパティ値の接頭辞を指定します
- suffix: 前述のsuffixです
- on*: 関数を指定します
- on*Params: on*で指定した関数に渡すパラメータを指定します 内部からo.onStart.apply(o, o.onStartParams)でコールされます
メソッド †
特にありません
用意されているeasing †
easeInで始まるものはモーションの開始時にエフェクトが現れます
easeOutで始まるものはモーションの終了時にエフェクトが現れます
easeInOutで始まるものはモーションの開始時と終了時にエフェクトが現れます
easeOutInで始まるものはモーションの開始時と終了時を除いた部分(モーションの中心)でエフェクトが現れます
- easeNone
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeOutInCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeOutInQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeOutInQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeOutInSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeOutInExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeOutInCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeOutInElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeOutInBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
- easeOutInBounce
tag: Effects?, JavaScript, Tween?
