ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ShiftyはJavaScriptでスタイルタグを書き換えてアニメーションを実現するライブラリです。

Webベースでアニメーションをしようと思うとCSS3を使ったり、Canvasタグを使うのが一般的です。しかし今回は素のJavaScriptのみでアニメーションを実行するShiftyを紹介します。


デモです。ボールが左右に行き交います。


コンソールを見ると分かりますが、スタイルタグがどんどん書き代わって位置を変えています。

Shiftyの特徴としては、最適化されたパフォーマンス、プロトタイプチェーンによる動作、拡張性、3KB以下の軽量なサイズとなっています。よりプログラマブルなアニメーション実装を実現したい時に使えそうです。

ShiftyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Web上でアニメーションを実装する方法は幾つか存在します。高度なグラフィックスを用いる場合はWebGL、CPU負荷を軽減するならばCSS3のアニメーションがいいようです。またマウスのクリックイベントを補足したい場合はJavaScriptで実装したいと思うこともあるでしょう。

問題はその実現方法よりも、その利用目的にあるかも知れません。アニメーションは使い方によってユーザビリティを高くしたり、ストレスを軽減させる効果があります。間違ってもFlashのスプラッシュ的な使い方はお勧めしません。

Shifty!

jeremyckahn/shifty · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2