[JavaScript] CSS3のTransitionを使ったアニメーションが簡単に実現できるJSライブラリ

こんにちは、@yoheiMuneです。
今日は、CSS3 TransformとCSS Transitionを使ったアニメーションを簡単に実現できるjQueryプラグインのjQuery Transitを紹介したいと思います。簡単に触れて面白くていい感じに使えます。

最初に

今回の記事は、「jQuery Transitすごく良いよ！ぜひ案件で使うべき！」というスタンスで書いたものではありません。
後述しますが、まだまだ発展途中のプラグイン（バージョンは0.1）でバグも多かったりするからです。
（ただ、だからこそ使ってContributeするという気持ちも持てるプラグインと感じています。）

それでもこのブログで記事を書いた理由は、使いやすいと感じたからです。
ライブラリとしてのインターフェースが良いなぁと思いました。
特に、キューでアニメーションを実行できるところとか。

jQuery Transitとは

jQuery Transitは、CSS3のTransitionを用いたアニメーションを、JavaScriptから実行できるjQuery Pluginです。
以下のようなコードを書く事で、対象のエレメントをCSS3 Transitionで動かすことが出来ます。

$('.box').transition({ x: '90px' });

ということでさっそく、jQuery Transitで色々と変化させるサンプルを作ってみました。

CSS Animation Using jQuery.enqt.js

jQuery Transitを使う際に注意すべき点

jQuery Transiは開発中のライブラリということもあり、tを使う上でいくつかの注意点があります。

• GithubのIssueによるとjQuery1.8.2（執筆時の最新）に対応できていない。
• Androidで動作しないものも多い。移動は動くけど、回転は微妙。拡大縮小も微妙。
• Androidでは1つの要素に対して複数の変化をさせられない。このライブラリでは、この問題を吸収してくれません。

jQuery Transitで気に入った点

jQuery Transitで気に入った点として、アニメーションをメソッドチェーンで指定すると、 それを順に実行してくれるというアニメーションキューのような動きをしてくれる点がスゴく良いなと思いました。
具体的には、上記のサンプル集のような動きで、以下のような実装で実現出来ます。

$("#circle")
  .transition({x:"180px", y:"30px"})
  .transition({x:"-80px", y:"30px"})
  .transition({x:"0px", y:"0px"});

これに、waitとか、他メソッドのcallとかもっとTween的な要素があると更に良いなぁと思います。リクエストしてみよっかなぁ。
同じような事を生のJSで実行する場合には、コールバックの入れ子になってしまい奇麗に書けない。
アニメーションを実現するライブラリでは、キューアニメーションがあると嬉しいと感じた点でした。

参考資料

jQuery Transitのページを参考資料に掲載させて頂きます。
- jQuery Transitの本家ページ

- jQuery Transit @Github

最後に

最近は、スマホブラウザ用のゲーム開発をメインで実装しています。
その場面では、にゅるにゅると動く画面を実装する事が多く、 アニメーションとかより簡単に実現できる方法は無いものかと、試行錯誤しています。

今後も色々と便利なものや勉強になるものを見つけたら、ブログに書いて行きたいと思います。
最後までご覧頂きましてありがとうございました。