JSTweener - JavaScript でモーショントゥイーンするライブラリ
- http://coderepos.org/share/wiki/JSTweener
- http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/
JS でモーショントィーンするのに、JSTween というライブラリがあるのですが、一つ一つのモーションで setTimeout(func, 0) で回しててるため増えれば増えるほど重くなったり、style 設定が結構面倒だったり、一度に複数プロパティ登録ができなかったりしたので、自分でライブラリを作ってみました。ひっつき☆スターを JSTweener で動かしたら体感で全然速くなりました。
コード例ですが、ひっつきスターでのトゥイーン処理は
JSTweener.addTween(el.style, {
time: tm,
transitions: 'easeOutExpo',
onComplete: function() { moveStar(el) },
width: size,
height: size,
left: mousePoint.x + Math.random() * 100 - 50,
top: mousePoint.y + Math.random() * 100 - 50
});
のように書けます。API はまんま Tweener。penner's easing 関数も Tweener のを JS に移植してるので、Tweener で使えるのはそのまま使うことが出来ます。
ただほんとにシンプルなメインの部分の処理しか書いてないので、アルファ(ブラウザによって CSS での書き方が異なるから)値をフェードアウト、なんかは onUpdate にコールバック登録して自前で処理を書かなくてはなりません。ただよく使いそうな top/left/height/width/marginXXXX などは何もせずとも値を変化できるので、使いどころによっては素で十分だったりします。