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. no-image
  2. Responsive 3d Fold Scroll
  3. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  4. jQuery Section Navi Plugin
  5. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  6. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP