JavaScript/Library/Effects/JSTweener http://www.ark-web.jp/sandbox/wiki/277.html

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?

Menu

• システム勉強会
• オープンソース・ライセンスなツールなど
• Plaggerでみんなのブックマークをアグリゲート

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

ARK-Webビジネスブログの最新記事