SVGモーフィングで、図形を徐々に変化させてみよう

モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね(懐かしい!)。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能!さっそく挑戦してみましょう!

↑私が10年以上利用している会計ソフト!


追記(2015年12月28日):SMILはSVG次期バージョンから非推奨となるようです。
Intent to deprecate: SMIL – Google Groups

SVGモーフィングを使った例

SVGモーフィングとはなんぞや?ってことで、まずは以下の作例をご覧ください。徐々に変化していく様子がおもしろいですね!

batman
リンク先ではバットマンの年代別ロゴをSVGモーフィングで表示しています。

See the Pen An Intro to SVG Animation with SMIL – Example 3 by Noah Blon (@noahblon) on CodePen.

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.

See the Pen Morphing Preloader by Madmonkey Studio (@MadmonkeyStudio) on CodePen.

SVGモーフィングの基礎知識

上記で紹介したようなSVGモーフィングを作成する上で必要な基礎知識をまとめておきます。

SMIL!スマイル!

SVGのモーフィングにはSMIL(Synchronized Multimedia Integration Language)というW3Cから勧告されたXMLの技術を利用します。読み方は「スマイル」!にっこり!animate といった要素を使って、SVGにアニメーションを追加できます。

IEは対象外

svg-support
Can I useのリストを見てのとおり、SVGのSMILアニメーションは今のところIEのどのバージョンにも対応していません…。あくまで装飾要素としての利用、またはIEを完全に切り捨てないと実用はまだ難しそうです…。

頂点の数が同じ図形に限る

ふたつの図形を徐々に変化させていくモーフィングですが、今回紹介する技術では最初の図形と最後の図形の頂点の数が等しくないとうまく動作しません。頂点の数が異なる場合、最初と最後の図形が交互に表示されるだけとなってしまいます。複雑な図形を変化させるには、少し頭を使わないといけませんね。図形を作成する際は、その点を頭に入れておきましょう。

animate 要素の主な属性

実際にアニメーションを加える際に必要な要素、animate 。この要素には多くの属性が用意されています。その内で抑えておくとよさそうなものをいくつかピックアップします。

attributeName

アニメーションを行う属性の名前を指定します。例えばx軸の距離を変化させるには x 、y軸の距離なら y 、色なら fill など。今回は図形(path)のデータ(data)を変化させるので d を指定してモーフィングさせちゃいます。

from

属性の最初の値を指定します。ページが読み込まれた時の状態ですね。

to

属性の最後の値を指定します。アニメーションが終了する時の状態です。

dur

アニメーションを行う時間を指定します。例えば、5秒の場合は 5s 、500ミリ秒は 500ms と記述。

repeatCount

アニメーションを繰り返し行う回数を指定。indefinite と書けば無限リピートします。

fill

アニメーションが終了した後表示する図形の状態を指定。freeze で終了時の状態を保持。remove でアニメーション開始時の状態に戻ります。

begin

アニメーションが始まるまでの待機時間(5秒なら 5s など)や、アニメーション開始のアクション(click, mouseover, mouseout など)を指定。

end

アニメーションが終了するまでの待機時間(5秒なら 5s など)やアニメーション停止のアクション(click, mouseover, mouseout など)を指定。

SVGモーフィングに挑戦!

1. Illustratorで図形を作成

shape
まずはアニメーション開始時と終了時に表示する図形をIllustratorで作成します。前述のとおり、頂点の数が同じ図形でないとうまく動作しないので、今回はお花の図形を作成後、ポイントをずらして鳥さんの図形を作成。

2. SVGコードを記述

まずは開始時の図形をSVGで表示。Illustratorで図形をコピーし、エディターに貼り付けるだけでコードが生成されます。詳しい手順は過去記事「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」を参考にしてください。以下のコードでお花の図形が表示されます。

<svg viewBox="0 0 65 62.2">
  <path d="M32.5,8.5c0-22.6,14.2,6.1,6.8,13.8c7.4-7.7,39.1-3.1,15.3,2.2c23.8-5.3,0.9,17-11.1,10.8c11.9,6.3,17.3,37.9,2.6,15.2
     c14.7,22.6-13.7,7.7-13.7-7.2c0,14.9-28.4,29.8-13.7,7.2c-14.7,22.6-9.3-9,2.6-15.2C9.5,41.6-13.4,19.2,10.4,24.6
     c-23.8-5.3,7.9-10,15.3-2.2C18.3,14.6,32.5-14.1,32.5,8.5z"/>
</svg>

続いてアニメーション用のコードを追加します。SVGアニメーションの基本文法は

<svg>
  <path 属性="...">
    <animate 属性="...">
  </path>
</svg>

という感じです。なので上記お花のSVGに path の閉じタグを追加し、その中に animate 要素を追加します。

<svg viewBox="0 0 65 62.2">
  <path d="M32.5,8.5c0-22.6,14.2,6.1,6.8,13.8c7.4-7.7,39.1-3.1,15.3,2.2c23.8-5.3,0.9,17-11.1,10.8c11.9,6.3,17.3,37.9,2.6,15.2
     c14.7,22.6-13.7,7.7-13.7-7.2c0,14.9-28.4,29.8-13.7,7.2c-14.7,22.6-9.3-9,2.6-15.2C9.5,41.6-13.4,19.2,10.4,24.6
     c-23.8-5.3,7.9-10,15.3-2.2C18.3,14.6,32.5-14.1,32.5,8.5z">
    <animate attributeName="d"
             repeatCount="indefinite"
             dur="2s"
             to="M26.2,25C40.1-8.9,62.6-3.1,48.8,11.7C63.5,0.4,75.6,14,51.2,22.4c21.5-3.7,10.3,11.6-2.8,10.4c14.1,4.6,2.7,10.2-7.8,7.3 c11.8,4,0.6,9.1-10.5,6.6c1,4.8,2.6,18-12.4,4.9C8.3,51.3,4.7,35,9.3,27c-5.4-0.7-12.5-0.6-1.1-3.4c-15.4-4.9-5.9-4.8,2.1-3.2 C13.3,11.9,26.1,11.1,26.2,25z">
  </path>
</svg>

See the Pen SVG Morphing by Mana (@manabox) on CodePen.


animate 要素に追加している属性ですが、attributeName でデータを表す d を指定し、図形を変化させる事を指定。repeatCount="indefinite" で無限ループ、dur="2s" で2秒かけて変化させる指定、to でアニメーション終了時の図形の path のデータをペーストして指定しています。

応用1:色を変えてみよう

先ほど作成したSVGモーフィングを元に応用として色を加えてみましょう。上記で書いた animate 要素の下に、新たに animate 要素を追加し、attributeNamefill を指定すれば色を変更できます。カラーコードは values でセミコロンで区切って指定します。複数の色を指定してもOK!ポイントは dur の値を同じ秒数にして、モーフィングのタイミングと色変化のタイミングをあわせることですかね。(まぁお好みでケド…)

<svg viewBox="0 0 65 62.2">
  <path d="M32.5,8.5c0-22.6,14.2,6.1,6.8,13.8c7.4-7.7,39.1-3.1,15.3,2.2c23.8-5.3,0.9,17-11.1,10.8c11.9,6.3,17.3,37.9,2.6,15.2
     c14.7,22.6-13.7,7.7-13.7-7.2c0,14.9-28.4,29.8-13.7,7.2c-14.7,22.6-9.3-9,2.6-15.2C9.5,41.6-13.4,19.2,10.4,24.6
     c-23.8-5.3,7.9-10,15.3-2.2C18.3,14.6,32.5-14.1,32.5,8.5z">
    <animate attributeName="d"
             repeatCount="indefinite"
             dur="2s"
             to="M26.2,25C40.1-8.9,62.6-3.1,48.8,11.7C63.5,0.4,75.6,14,51.2,22.4c21.5-3.7,10.3,11.6-2.8,10.4c14.1,4.6,2.7,10.2-7.8,7.3 c11.8,4,0.6,9.1-10.5,6.6c1,4.8,2.6,18-12.4,4.9C8.3,51.3,4.7,35,9.3,27c-5.4-0.7-12.5-0.6-1.1-3.4c-15.4-4.9-5.9-4.8,2.1-3.2 C13.3,11.9,26.1,11.1,26.2,25z" />
    <animate attributeName="fill"
             dur="2s"
             repeatCount="indefinite"
             values="#D2527F;#F9BF3B" />
  </path>
</svg>

See the Pen SVG Morphing with Colour by Mana (@manabox) on CodePen.

応用2:クリックやホバーでアニメーションを再生&停止

ここまでの例ではアニメーションを自動で再生していましたが、その再生や停止のタイミングも制御できます。

See the Pen SVG Morphing mouse event by Mana (@manabox) on CodePen.


この例では begin="mouseover" で図形にマウスカーソルをあわせるとアニメーションを開始させ、end="mouseout" でカーソルがはずれるとアニメーションを停止させています。click を指定すればクリックにより開始・停止の指定ができます。fill="freeze" も指定しているので、カーソルがはずれた時点の状態が保持され、表示されます。


JavaScriptなんかと組み合わせると、もっと複雑かつ魅力的な表現も可能!アイデア次第で様々な応用にチャレンジできそうですね!

参考記事:

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)