2012/10/17更新

[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

Translate



Rotate



Rotate3D



Skew



Scale



Multi






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



最後に

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

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。