coﾘ・ー・ﾝ＜2nd life

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

ツイートする

Permalink | コメント(2) | トラックバック(0) | 02:33