2007-09-23

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 などは何もせずとも値を変化できるので、使いどころによっては素で十分だったりします。

2nd life (移転しました)

JSTweener - JavaScript でモーショントゥイーンするライブラリ