要注目！CSSとJavaScriptで作るアニメーション「Animatable」
AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。
最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。
色々な画像が並んでいます。マウスオーバーでアニメーションが実行されます。
6番は曲線が変化するアニメーションです。
2番は背景画像がアニメーションします。
12番はドロップシャドーです。
fromとtoののところで実際に設定するCSSプロパティが分かります。
data-fromとdata-toでプロパティを指定します。
[s2If current_user_can(access_s2member_level1)]
[/s2If]
AnimatableはいわばFlashのアニメーションに似ています。最初のフレームをdata-fromで指定して、最終的な変化をdata-toとします。この間の変化をAnimatableが補完してくれるということです。DOMが変化するので他の要素に影響を与えてしまう場合もあるかも知れませんが、アイディア次第で面白いアニメーションが作れそうです。
AnimatableはJavaScript、CSS製のソフトウェアです。ソースコードは公開されていますが、ライセンスは明記されていませんのでご注意ください。
MOONGIFTはこう見る
Animatableは最初の状態と最期の状態を指定して、CSSのスタイルを徐々に変化させてアニメーションのように動かします。このやり方自体はjQueryのslideUpなどの手法に似ています。それをもっと汎用的にして繰り返せるようにしたものと言えます。
原理が分かるとシンプルですが、このアイディアは面白いです。今は二つのポイントを繰り返すのみですが、複数のポイントを持てるようになればさらにアニメーションとして使えるようになるかも知れません。JavaScriptで細かく制御する訳ではなく、CSSを変更するだけという分かりやすさもすばらしいです。