Morpheus今回はSVGを使って、特定の形から特定の形へのなめらかな変形を行う、いわゆるモーフィングを実現するJavaScriptライブラリをご紹介します。複雑なSVG間だと綺麗にいかないこともあるかもしれませんが、アイコンのアクセントとして使用するとサイトのリッチ感が増しますよ。用意するもの必要なものは公式Githubからダウンロードする下記のファイルひとつだけです。モーフィングに必要なのはこれだけですが、モーフィングさせるイベントをつけるならjQueryなり何なりも入れておいた方が楽かなーと思います。使い方自体は簡単なんですが、モーフィングはSVGを用意する方が面倒かもしれないですね。JavaScriptは下記のように完結な記述だけでOKです。//モーフィングさせるSVGをidで取得し変数に格納。SVGMorpheus('#mySvg_list');//変数に.toで変形先の形を指定する。この際、id指定なんですが#は不要。mySvg.to('shape1');実際には.toをsetTimeout()やclickイベントの中に入れて使うことがほとんどかなと思います。次はhtml側、というよりsvgタグの書き方です。モーフィングさせたいSVGを並べるかと思いきや、ひとつのSVGタグの中にそれぞれのシェイプをgタグで囲った、”変形予定リスト”みたいな感じで記述します。</g></svg>ちなみにgタグで囲った中で最初に表示されるのは一番最後のgタグになります。(なので上記のhtmlではshape1を一番下にしています)この際、注意したいのはgタグの中に入るシェイプを構成するタグはpath限定ということです。rectやpolygonなどのタグが混じっていると、一応動きますがエラーを吐きます。これはプラグインの仕様なのでしょう。それに、ひとつのSVGタグの中でモーフィングさせるので変形させるサイズや縦横比は同じエリア内に収まるものを用意した方が良さそうです。SVGを作成する際にイラストレーターのドキュメントサイズは固定して書き出すようにすると楽かなと思います。SVGを出力する際は、”アウトラインの作成”、”グループ解除”をしておくと良いかもしれません。Morpheusの基本的な使い方でした。modeで出来る範囲(2016年5月現在)モーダルで閲覧できるギャラリーを実装するのにfancyBox3が便利過ぎる。脳内賑やか系の主人公が送る特別じゃない愛すべき日常。ファンタジーもありません。ドラマチックより食い気優先。それでも好きなものが沢山ある三歩(さんぽ)は、普通の日々を今日も楽しく生きています。不安や不満やヘイトに目を向けるより、目の前の好きなものを味わう人生を送ろうと思える。そんな素敵な一冊です。普通のWebサイトをNuxt.jsで作り変えてみた話モーダルで閲覧できるギャラリーを実装するのにfancyBox3が便利過ぎる。家族との時間を大切にする事に貪欲です。