Web上での多彩な表現を支える存在がアニメーションです。マテリアルデザインのようなちょっとしたアニメーションもありますし、目を引くためにも動かしながら表示するのは大事な効果と言えるでしょう。 今回はそんなアニメーションを実現するライブラリ、Popmotionを紹介します。わずか12KB(ミニファイ、圧縮後)のJavaScriptライブラリです。

Popmotionの使い方

Popmotionは主にトゥーン系アニメーション、物理計算そして入力トラッキングの3つがサポートされています。

こちらはトゥーン系。

物理計算はクリックするとボールが飛ぶ仕組みです。

最後はトラッキング。円をドラッグして放すと元あった場所まで戻っていきます。

Popmotionを使えばクリックなどのイベントをとってちょっとだけアニメーションさせるといったこともできでしょう。PopmotionはCSS/DOM/SVGをサポートしており、アニメーションはスムーズです。

PopmotionはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Popmotion - JavaScript animation, physics and input tracking Popmotion/popmotion