SVGモーフィングアニメーションを自動補完してくれるjsライブラリ『flubber』

2017年10月15日javascript, WEB制作

通常SVGのモーフィングアニメーションといえばCSSで動かすにしろ、jsで動かすにしろ、元のSVGの頂点の数を次のSVGの頂点の数に合わせなければ、スムーズなアニメーションにはならないです。

flubberは簡潔な記述で、その問題を解決し、スムーズなSVGモーフィングアニメーションを実行できます。どのような感じかというと、次の動画みたいな感じになります。

これと同等以上の機能を有しており、記述も更に簡単なGASPのMorphSVG pluginがあるが、仕事で使うとなると年間1万6千円くらいのライセンス料がかかる。(個人利用の場合は、年間5.6000円くらい)

flubberのライセンスは、MIT LicenseなのでSVGモーフィングアニメーションを使いたい時は、こちらを使った方がお得そう。

flubberの使い方

See the Pen flubber SVG test by Shinji Yonetsu (@jquerybloger) on CodePen.

上記Githubページからzipファイルをダウンロードするかnpm installする。

使用したいページに以下を記述(D3.jsを使うのが一番簡潔な書き方になりそうなので、同時にD3.jsも読み込む。topojsonは地図データを使いたい時に任意で読み込めばいい。)

また、D3.jsだけでなく様々なライブラリとの互換性もあり、ライブラリを使用しなくても動く。

HTMLとCSS,js部分はcodepenのソースを確認してください。

他にcodepenである作品では、以下のものが分りやすい。こちらの例ではSVGのパスをjsコードの中に記述している。

See the Pen Flubber + Just Animate 2 (Experiment) by Christopher Wallis (@notoriousb1t) on CodePen.

この記事が気に入ったら
『いいね』しよう!