【Snap.svg】SVGモーフィングサンプル

最近Awwwardsで見かけるサイト、レベル高すぎて草ですね。
僕が最近友人に愚痴った内容です。w

レベルが高いかどうかの判断基準はユーザビリティやらデザインやらで人それぞれですが、見てて思うのがアニメーションのクオリティがすごいです。

中でもWebGLとかで表現されているアニメーションはもはやエンターテイメントですね〜。使いづらいけど。
見ててだいぶ楽しいですね〜。使いづらいけど。

今回は3Dアニメーションまではいかないですが（Three.jsは絶賛勉強中なので今後記事にしてきたいです）、SVGをぬるぬる動かしてくアニメーションサンプルを紹介できればと思いますー！
すごく個人的な見解が多いのであくまで参考程度に読んでいただければ幸いです。w

背景

そもそもこういったシェイプを使ってのアニメーション自体、canvasかsvgという個人差もあります。
最近vueでの実装が多かったため、htmlテンプレートとjsのひも付きがシンプルで僕はSVGアニメーションを好んでました。

そこでシェイプのモーフィングが必要になったのですが、色々模索した結果最終的にはSnap.svgで落ち着きました。
一応参考までにいくつかプラグインのリストアップをしておきます。

・Snap.svg
・KUTE.js
・Anime.js
・GreenSock MorphSVGPlugin

なぜSnap.svgだったか？というのも、これが一番滑らかつシンプルだったからですかね。。
Anime.jsとかだと同じパスを使ってモーフィングをしても厳密にポイント数が一致していないと滑らかな動きをしてくれませんでした。

サンプル

説明

snap.svgの設定は
http://snapsvg.io/
上記公式サイトからzipファイルをダウンロードし、dist/snap.svg-min.jsファイルを読み込みます。

内容は至ってシンプルです！

//まずモーフィングさせたいシェイプのパスを定義しておきます。
const heart1 = 'M129.997 250C-162.496 49.948 129.997 -104.423 129.997 88.203C129.997 -102.344 400.004 49.948 129.997 250Z'
const heart2 = 'M127.376 250.5C-157.974 174.568 127.376 -81.8946 127.376 27.0743C127.376 -78.0226 404.526 180.577 127.376 250.5Z'

//要素となるsvgタグの取得（属性値の指定はhtml上で直接記述でも特に問題はないです）
const svg = Snap('#svg').attr({
 width: 150,
 height: 150,
 viewBox: '0, 0, 250 250',
 fill: '#D73939'
})
//取得したsvgに先ほどのパスを設置
const path = svg.path(heart1)

この段階でハートが表示されます。
あとは１つ目のパスを２つ目に変形させるだけです。

//アニメーション定義
const anim = (shape, duration, easing) => {
 path.animate({
   path: shape
 }, duration, easing)
}
//アニメーション呼び出し
setInterval(() => {
 anim(heart2, 400, mina.easeout)
 setTimeout(() => {
   anim(heart1, 800, mina.bounce)
 }, 400)
}, 1400)

まとめ

これだけでシンプルなSVGモーフィングのアニメーションは作れます〜！
語彙力なくて説明がざっくりなのはあまり気になさらず〜（普通気にしますよね。すみません。w）

どういった活用方法があるのかサンプルを見てた時、クリックしたらゼリーっぽい動きをするボタンだったりとかはクリエイティブでいいなーと思いました。（url思い出したら貼ります。。）
参考までに弊社でもSnap.svgを活用したページも是非。。
https://www.spreadsystems.co.jp/about/