ども、Creative-DivのShibuyaです。
今回はSVGを簡単に操作してアニメーションできるSnap.svgを触ってみようと思います。
Snap.svgとは?
Snap.svgは、Adobeが開発しているSVGアニメーションライブラリーです。
Illustratorなどで作成したSVGのパスを用意することでSVGアニメーションを作ることができます。
Snap.svgを触ってみる。
Snap.svgはsnapsvg.ioからダウンロードできます。
(CDNもありますよ!)
素材の用意
今回は簡単に、丸をクリックするとハートに変形させてみたいと思います。
イラレで丸とハートを作り、SVGで書き出します。
こんな感じです。
イラレで素材を作るときは、変更前と変更後のパスの個数が同一になるようにします。
Snap.svgでアニメーションさせる
素材の準備ができたら、アニメーションさせていきます。
See the Pen oNXvyoQ by Y.Shibuya (@YS_FE) on CodePen.
HTMLにはインラインでアニメーション開始時のSVG(今回は丸)を予め書いておきます。
SVGがクリックされたらpathEndのパス(今回はハート)に変形するようにしています。
終わりに。
いかがだったでしょうか？
IllustratorとSnap.svgでちょっとしたアニメーション作れる上に、Animate CCとSnap.svgで凝ったアニメーションも作れてしまうライブラリー。
一度使ってみてはいかがでしょうか？