フォローしました最近Awwwardsで見かけるサイト、レベル高すぎて草ですね。僕が最近友人に愚痴った内容です。wレベルが高いかどうかの判断基準はユーザビリティやらデザインやらで人それぞれですが、見てて思うのがアニメーションのクオリティがすごいです。中でもWebGLとかで表現されているアニメーションはもはやエンターテイメントですね〜。見ててだいぶ楽しいですね〜。今回は3Dアニメーションまではいかないですが(Three.jsは絶賛勉強中なので今後記事にしてきたいです)、SVGをぬるぬる動かしてくアニメーションサンプルを紹介できればと思いますー!すごく個人的な見解が多いのであくまで参考程度に読んでいただければ幸いです。w背景そもそもこういったシェイプを使ってのアニメーション自体、canvasかsvgという個人差もあります。最近vueでの実装が多かったため、htmlテンプレートとjsのひも付きがシンプルで僕はSVGアニメーションを好んでました。そこでシェイプのモーフィングが必要になったのですが、色々模索した結果最終的にはSnap.svgで落ち着きました。一応参考までにいくつかプラグインのリストアップをしておきます。MorphSVGPluginなぜSnap.svgだったか?というのも、これが一番滑らかつシンプルだったからですかね。Anime.jsとかだと同じパスを使ってモーフィングをしても厳密にポイント数が一致していないと滑らかな動きをしてくれませんでした。サンプル説明snap.svgの設定はhttp://snapsvg.io/上記公式サイトからzipファイルをダウンロードし、dist/snap.svg-min.jsファイルを読み込みます。内容は至ってシンプルです!//まずモーフィングさせたいシェイプのパスを定義しておきます。svg.path(heart1)この段階でハートが表示されます。あとは1つ目のパスを2つ目に変形させるだけです。1400)まとめこれだけでシンプルなSVGモーフィングのアニメーションは作れます〜!語彙力なくて説明がざっくりなのはあまり気になさらず〜(普通気にしますよね。w)どういった活用方法があるのかサンプルを見てた時、クリックしたらゼリーっぽい動きをするボタンだったりとかはクリエイティブでいいなーと思いました。(url思い出したら貼ります。)参考までに弊社でもSnap.svgを活用したページも是非。https://www.spreadsystems.co.jp/about/ダウンロード#アニメーション#svg#snapsvgこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。【デザイナー向け】Lottieの使い方。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。