svg と javascript でモーフィング

はじめに

html5 でアクションに応じたアニメーションを作るには

1. css で animation プロパティを使う
2. svg の animation タグを使う
3. javascript の setInterval 関数を使う

といった方法が考えられます。上のものほど、実現は簡単ですが、微妙な調整がむづかしくなり、下に行くほど、細かい調整は可能ですが、実装がめんどくさくなります。

今回は、2で実現する方法を調査しました。

サンプル

svg領域をクリックすると、白いポリゴンが青いポリゴンに変化するサンプル
https://ft28.github.io/samples/polygon_to_circle/index.html
を作成しました。

L51-L67がアニメーションを定義している部分になります。

begin を各ポリゴンごとに少し変更することで、左から順に実行するアニメーションを実現しています。また、同じポリゴンに関する形状変更のアニメーションと色変更のアニメーションの begin を同じにすることで、ポリゴンに関するアニメーションが同期するよう調整しています。

L53 animatePolygon.setAttribute('begin', "screen.click + " + index + 's');
...
L62 animateColor.setAttribute('begin', "screen.click + " + index + 's');

このbeginの他、dur などの値を調整することで、アニメーションAが終わった後に、アニメーションBを開始するなど、より複雑なアニメーションを作成可能です。

モーフィングアニメーションのためには、変更前ポリゴンを構成する点の数と、変更後のポリゴンを構成する点の数が一致していなければ、アニメーションがおかしくなるので、L15 で、変更前の点の数が、変更後の点の数よりも少ない場合には、変更前のポリゴンに適当な点を追加する処理を行ってます。

まとめ

http://snapsvg.io/ のようなライブラリを使わなくても、この程度のアニメーションならばもっと簡単に実装できますが、ライブラリで実現できる以上のことが必要となり、結局、素のsvg と javascriptで実装したついでに、調査内容をまとめてみました。

参考URL

[SVG 1.1 仕様 （第２版） 日本語訳:19 アニメーション] (https://triple-underscore.github.io/SVG11/animate.html)