flubber

JavaScript

滑らかなシェイプアニメーションを実装できる「flubber」

flubberは、滑らかな2Dによるシェイプアニメーションを実装することができるJSライブラリです。アニメーションとともに、さまざまな形に変化していくので見ていてとてもおもしろいですね。

2Dによるシェイプ間をスムーズに構築

デモ

デモでは、音符、星、ハート、手、飛行機……など、いろんな形に変化していく動作を見ることができます。アニメーションは、カクカクすることもなく非常に滑らかで、見ていてとても気持ちいいです。

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

simple-calendarイベント設定もできるシンプルなカレンダー実装「simple-calendar」前のページ

WAI ARIAに準拠したアクセシブルなアコーディオン「ARIA ACCORDION」次のページNO IMAGE

最近の記事

  1. 抹茶クリームドーナツ
  2. FAST
  3. クリスマスブレンド
  4. ホワイトチョコマカダミアドーナツ
  5. エッグペペ
PAGE TOP