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

関連記事

  1. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  2. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  3. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  4. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

  5. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  6. Blindify

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP