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. jQuery contextMenu plugin & polyfill
  2. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  3. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  4. JavaScript

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

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

  5. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  6. no-image

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP