meetup.tweener Archive

まずは非常に簡単なアニメーションをやってみましょう。Wireframe の Cube をクリックしてみてください。ジャンプ先のページでも見られますが、このアニメーションは以下のコードで実現されています。

Meetup.Tweener.isUsing = 'jQuery'; // The Magic spell of using Tweener with jQuery
$(function(){ // jQuery way of DOM Ready
  var cube = document.getElementById('cube');
  $(cube).click(function(){
    Meetup.Tweener.addTween(
      cube,  // 1st arg: the target element
      {'left': '100%'} // 2nd arg: animation property
    );
  });
});

ご覧の通り、Meetup.Tweener は AS3 Tweener と全く同じ、Tweener.addTween というメソッドの呼び出しで始まります。詳しい内容は次回以降お楽しみに、ということで。

Flickr: Hello world to Meetup.Tweener: Easy animation

今更、Hello World, という感じでもないんですが、Meetup.Tweener の解説記事を書いていこうと思います。

Meetup.Tweener は僕が Open Source として開発している JavaScript のライブラリで、HTML + JavaScript の環境で非常に簡単にアニメーションを作ることができます。もし Flash での開発経験があれば、Tweener という Library は絶対聞いたことがあると思うのですが、Original の Tweener と API 互換性を持たせつつ、JavaScript 用に最適化をしています。

今やどのメジャー JavaScript ライブラリもアニメーション機能があるというのになんでいまさらアニメーションライブラリ？と思われるかもしれません。Meetup.Tweener の利点は

1. 依存性は低く、（理論上では）どのメジャーライブラリとも共存できる
2. 長い間 Flash で培われた API
3. Meetup での実用実績

(1) に関して、今のところ対応しているのは jQuery と MochiKit だけなんですが、Prototype.js, MooTools, YUI, Dojo には対応する準備があります。(2) に関して、HTML5 が台頭してくるにあたって、多くの Flash 製作者が JavaScript に流れてくることが予想されます（楽観的）。彼らにとってなれしたしんできた syntax が使えるのはとても大きな資産になることでしょう。また、アニメーションをメジャーライブラリに頼らないことで、突然のコードベース変更にも強いでしょう。

このライブラリは Google Adplanner によれば 6M の Unique Visitor をほこる Meetup.com で運用の実績があります。実地で使われているものですから、問題があれば対処は素早く行われます。

開発は Github 上の meetup.tweener レポジトリにて行われていて、ドキュメントも Github 上にあります。

開発にあたって、Yuichi Tateno (id:secondlife) さんの JSTweener を参考にさせていただきました。ありがとうございます。