ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5の表現力が上がったことで、SVGなどを使ってプログラマブルなドローが実現できるようになってきました。パスを編集するだけで形を変更できるので、ある形から別な形に変更するのも難しくはありません。しかし、それが自然かどうかは別です。

もし自然なモーフィングを求めているならばflubberを使ってみましょう。

flubberの使い方

flubberの例です。変化が滑らかなのが分かります。

州の形に次々と変わる例。

州になった後、左右で四角い形になる例。

分裂と結合を繰り返す例。

flubberのアニメーションは非常に滑らかです。単にアニメーションするだけでなく、その差分を計算することによって、より自然な変化を実現できるようになっています。できていることは同じですが、こうしたUXにこだわったライブラリは今後増えていくのではないでしょうか。

flubberはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

veltman/flubber: Tools for smoother shape animations.

 

MOONGIFTの関連記事

  • DevRel
  • Com2