ゆたろです。どうもです。 この頃、冬なのに寒かったり暖かかったりで上着を着ていくか毎朝迷ってます。 さてさて、最近サイト上で良く見かけるsvgアニメーションですが、ただ単に動かすだけではなく、変形させることもできます。今回は、svgモーフィングを簡単に実装できるsvg-morpheus.jsの紹介をしていきます。 ▼目次 モーフィングとは? svg-morpheus.jsを使ってみよう モーフィングさせるsvgを用意する モーフィングを実行する サンプル まとめ モーフィングとは? そもそも一般的に言うモーフィングとはなんなのでしょうか? ある物体から別の物体へと自然に変形する映像をみせる。これはオーバーラップを使った映像のすり替えとは異なり、変形していく間の映像をコンピュータによって補完して作成する。変身・変化を意味する単語「メタモルフォルシス(metamorphosis)」の中間部分か
![もーふぃんぐ?SVGをうんにょりアニメーションさせるプラグイン「svg-morpheus.js」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe3717f2d42a2d6427260f63101084c96f655edb/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2016%2F12%2F148669930295269800_54.gif)