JavaScriptで実現するアニメーションライブラリ「Shifty」
ShiftyはJavaScriptでスタイルタグを書き換えてアニメーションを実現するライブラリです。
Webベースでアニメーションをしようと思うとCSS3を使ったり、Canvasタグを使うのが一般的です。しかし今回は素のJavaScriptのみでアニメーションを実行するShiftyを紹介します。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.39.58.1365509808.png)
デモです。ボールが左右に行き交います。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.40.51.1365509811.png)
コンソールを見ると分かりますが、スタイルタグがどんどん書き代わって位置を変えています。
Shiftyの特徴としては、最適化されたパフォーマンス、プロトタイプチェーンによる動作、拡張性、3KB以下の軽量なサイズとなっています。よりプログラマブルなアニメーション実装を実現したい時に使えそうです。
ShiftyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Web上でアニメーションを実装する方法は幾つか存在します。高度なグラフィックスを用いる場合はWebGL、CPU負荷を軽減するならばCSS3のアニメーションがいいようです。またマウスのクリックイベントを補足したい場合はJavaScriptで実装したいと思うこともあるでしょう。
問題はその実現方法よりも、その利用目的にあるかも知れません。アニメーションは使い方によってユーザビリティを高くしたり、ストレスを軽減させる効果があります。間違ってもFlashのスプラッシュ的な使い方はお勧めしません。