flubberは、滑らかな2Dによるシェイプアニメーションを実装することができるJSライブラリです。アニメーションとともに、さまざまな形に変化していくので見ていてとてもおもしろいですね。
2Dによるシェイプ間をスムーズに構築
flubberの実際のデモページは以下になります（SVGパスを使ったベーシックなタイプです）。
デモでは、音符、星、ハート、手、飛行機……など、いろんな形に変化していく動作を見ることができます。アニメーションは、カクカクすることもなく非常に滑らかで、見ていてとても気持ちいいです。
2Dによるシェイプ間をスムーズに構築したいという人にはピッタリのツールですね。
また、flubberにはAPIもいろいろ用意されています。いくつか具体的なAPIを挙げると、flubber.interpolate(fromShape, toShape [, options])、flubber.toCircle(fromShape, x, y, r[, options])、flubber.toRect(fromShape, x, y, width, height[, options])、flubber.fromCircle(x, y, r, toShape[, options])、flubber.fromRect(x, y, width, height, toShape[, options])、flubber.separate(fromShape, toShapeList[, options])などがあります。
他にもまだまだAPIがあるので、カスタマイズして自分好みのシェイプアニメーションを作りたい人は、ぜひチェックしてみてください。
というわけで、滑らかな2Dによるシェイプアニメーションを実装できるJSライブラリ「flubber」のご紹介でした。
flubberの具体的な使い方やダウンロードは、以下のページからどうぞ。
