HTML5の表現力が上がったことで、SVGなどを使ってプログラマブルなドローが実現できるようになってきました。パスを編集するだけで形を変更できるので、ある形から別な形に変更するのも難しくはありません。しかし、それが自然かどうかは別です。
もし自然なモーフィングを求めているならばflubberを使ってみましょう。
flubberの使い方
flubberの例です。変化が滑らかなのが分かります。
州の形に次々と変わる例。
州になった後、左右で四角い形になる例。
分裂と結合を繰り返す例。
flubberのアニメーションは非常に滑らかです。単にアニメーションするだけでなく、その差分を計算することによって、より自然な変化を実現できるようになっています。できていることは同じですが、こうしたUXにこだわったライブラリは今後増えていくのではないでしょうか。
flubberはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTの関連記事
コメント