JSTweener ライクなアニメーション code snippets

JavaScript Tween

JSTweenerライクな軽量アニメーションが手軽に実現できる、tween.jsというのを書いてみました。
Greasemonkey Script を書く際に、@requireで手軽に使えるサイズのシンプルなアニメーション code snippets がほしかったので、強引に18行という短さに収めています。手軽に使いたいので、サンプルコード扱いで、自由に使用、改変して頂いてOKです。一応IE6, Firefox2, Safari3*1, Opera9で動きます。それなりにクロスブラウザです。

とりあえずサンプル


簡単な使い方はこれだけ。

var div = document.getElementById("simple-header");
div.style.position = "absolute";
new Tween(div.style,{time:1,left:{to:300}});
new Tween(div.style,{time:1,delay:1,left:{from:300,to:0,tmpl:'+$#px'}});
  • fromは省略できますが、省略すると0になってしまいがちなので注意。
  • tmplも省略可能です。$#の部分に値が展開されます。$[0-9]とすると値をtoFixed([0-9])で丸めます。
  • '+$#px'とすれば、負の値を0に切り上げます。下記のIEのエラー対策です。

注意点とか

  • IEはstyleに負の値?を指定するとエラーになる場合があるみたいなので、注意が必要です。
  • tween.jsにはeasingFunctionを含めていないので、必要であれば JSTweener の easingFunctions を借りちゃってください。


後でbezierに対応したバージョンも作ろうと思っています。そっちは無理に短くしないで読みやすくするつもり。

実装の話

このScriptでは、値の計算を最初にまとめて行っておいて、setTimeoutの中では値を適用する処理だけしかしないという実装にしました。なので、動作としても軽量になっているはずです。ただ、現状はnewする毎にTimerを作っているので、たくさん動かすケースにはあまり向いてません。
Timerが独立してるから、cancelとかを簡単に実装できるけど、とりあえずは見送りました。


ちなみに、右下の猿をクリックして新規ユーザスクリプトからScriptを作る方法では、@requireは使えません。先に@requireが書かれたuser.jsファイルを作成し、そのファイルをインストールするといった手順をとる必要があります。一度インストールしてしまった後で、requireを書いてもそのファイルは読み込まれないので注意が必要です。

*1:Safari2、Safari1.3でも動かないこともないはずですが、toFixed周りが少し怪しいです