個人的に好きなJavaScriptのアニメーションライブラリ5選+1

はてブを見ているとたまに「○○の○選」や「○○のまとめ」といったタイトルで書かれているエントリーがあります。
流行っているのかはわかりませんがつい見てしまいます。
ブログを始めたら僕もやってみようと思っていたので試しにやってみます。

触ったコードがそのまま動くのが好きなのでJavaScriptのアニメーションライブラリを選んでみました。
エフェクトというよりはモーションに近いものを選んでいます。

bonsai

bonsai
名前が盆栽のライブラリ。
ロゴもそれっぽいしたぶん意識してるはず!

「A lightweight graphics library with an intuitive graphics API and an SVG renderer.」
直訳 (直感的なグラフィックスAPIとSVGレンダラで軽量のグラフィックライブラリ)

とあり、結構簡単にアニメーションさせることができます。
メニューの「Examples」からサンプルを見ることが出来ます。

smart.js

smart.js
国産のスマホにも対応したライブラリ。
「そもそもSafariの描画が遅い」という対応状況のコメントが好き。

ページを読み込んだ時とマウスオーバー時にロゴがアニメーションします。
サンプルもありますので是非確認を!
シンプルなページ構成で必要な情報にすぐアクセス出来るのもいい感じです。

Collie

Collie
犬の種類のコリーの名前がついたライブラリ。
サンプルでもロゴでもコリーがいっぱい。

鳩がパタパタ、ロゴをクリックでワンと吠えるようなアクションをします。
サイトは日本語、英語、ハングルの3言語対応でチュートリアルもあります。
ただしチュートリアルは英語でライブラリ内部のコメントはハングルで書かれています。

$fx()

$fx()
物凄く軽いライブラリ。
3.7kbとかどんだけだよ!

「Manuals」のページ下部にサンプルがあります。
複雑なことは出来ません。Simple is Bestが貫かれてます。

TweenJS

TweenJS
名前の通りトゥイーンアニメーションが得意なライブラリ。
「TWEEN CIRCLES」というサンプルが一番好き。

TweenJSを含むメニューにある4つのライブラリを使うことによってゲームも作れます。

番外編

ライブラリではありませんが、bonsaiと同じSVGという技術を用いて描かれているアニメーション。
知ってる方も多いかと思います。

SVG Girl

SVG Girl

初めて見た時こんな顔になりました∑(゚Д゚)
FLASHに頼らないアニメーションがここまで出来るなんて思いませんでしたからね。
そのうちプログラムアニメーターなる職業が成り立つかも?なんて

最近のJavaScript界隈は盛り上がってますよね。
次々と新しいことが出来るようになって勉強が全然追いつきませんが。

しかしJavaScriptをここまで面白く感じるとは思わなかったなぁ
高校生の頃はOFFってサイトを見ていたというのに・・・


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です