2020.3.23

SVGアニメーションが簡単に実装できるSnap.svg触ってみた!

しぶやち

ども、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で凝ったアニメーションも作れてしまうライブラリー。
一度使ってみてはいかがでしょうか?

  • TWEET!
  • SHARE!