付録A4: モーフィングする図形 (上級)

付録A4: モーフィングする図形 (上級テクニック)

SVGアニメーションの中でも特に視覚的に面白く、印象的な効果の一つが「モーフィング」です。モーフィングとは、ある図形が別の図形へと滑らかに形を変えていくアニメーションのこと。ロゴやアイコンが変身したり、プレゼンテーションで注目を集めたりと、様々な場面で活用できます。

このページでは、SVGの<path>要素とSMILアニメーションを使って、基本的なモーフィングを実現する方法を紹介します。より高度なモーフィングにはJavaScriptライブラリが使われることもありますが、まずはSVG自身の機能でどこまでできるか見ていきましょう。

完成デモ: 図形モーフィング

下の図形が、四角形 → 星形 → 円形へと順番にモーフィングします。アニメーションは自動で繰り返されます。

アニメーション期間 (dur): 6s

モーフィングの基本原理

SVGモーフィングは、基本的に<path>要素のd属性（パスデータ）の値を、ある形状から別の形状のデータへと時間経過とともに変化させることで実現されます。

パスデータ (d属性) のアニメーション: SMILの<animate>要素でattributeName="d"を指定し、fromとto属性、またはvalues属性に異なるパスデータを設定します。
アンカーポイントの数と順序の重要性:
最も滑らかで自然なモーフィングを実現するためには、変化前と変化後のパスのアンカーポイント（線分や曲線の端点）の数と、それらの並び順（パスを描く方向）が一致している（または非常に近い）ことが理想的です。
アンカーポイントの数が大きく異なったり、順序が逆だったりすると、アニメーションの途中で図形が予期せぬ形に歪んだり、不自然な動きをしたりすることがあります。
ベクター編集ソフトでパスを作成する際には、この点を意識して、モーフィングさせるパス間でポイント数を合わせるように調整すると良いでしょう。
パスコマンドの種類: 可能であれば、変化前後のパスで使われているパスコマンドの種類（L, C, Q, Aなど）も近い方が、より自然な中間形状が生成されやすい傾向にあります。

高度なJavaScriptライブラリ（例: GreenSockのMorphSVGPlugin）は、アンカーポイントの数が異なるパス間でも、よりインテリジェントに中間形状を計算して自然に見えるモーフィングを生成する機能を持っています。

SMILを使ったモーフィング: `<animate attributeName="d">`

SMILを使えば、<path>要素の子要素として<animate>を配置し、その属性を以下のように設定することでモーフィングを実現できます。

<svg width="100" height="100" viewBox="0 0 100 100">
  <path id="myMorphingShape" d="M10,10 L90,10 L90,90 L10,90 Z"> <!-- 初期形状: 四角形 -->
    <animate attributeName="d"
             dur="3s"
             repeatCount="indefinite"
             values="M10,10 L90,10 L90,90 L10,90 Z;  <!-- 四角形 -->
                     M50,10 L60,90 L10,40 L90,40 L40,90 Z; <!-- 星形 (ポイント数注意) -->
                     M10,10 L90,10 L90,90 L10,90 Z;" /> <!-- 四角形に戻る -->
  </path>
</svg>

attributeName="d": パスデータをアニメーションさせることを指定。
values: セミコロン(;)で区切って、変化させたい複数のパスデータを順番に記述します。アニメーションはこれらの形状間を順番に補間しながら変化します。最後の形状から最初の形状へも補間されます（repeatCount="indefinite"の場合）。
dur, repeatCount, fill などの属性は、通常のアニメーションと同様に動作します。
calcMode: 補間方法を指定します。デフォルトはlinear（線形補間）ですが、discrete（中間なしで切り替え）、paced（一定速度）、spline（カスタムイージング）なども指定できます。モーフィングではlinearかpacedがよく使われます。

上の完成デモでは、四角形、星形、円形の3つの形状データをvaluesに設定し、それらが順番に変化するようにしています。

豆知識 (English/日本語)

Did you know? Morphing effects became widely popularized in the early 1990s, notably in Michael Jackson's "Black or White" music video and films like "Terminator 2: Judgment Day." While those were high-end computer graphics, SVG allows web developers to create similar captivating shape-shifting animations directly in the browser.

知っていましたか？モーフィングエフェクトは、1990年代初頭、特にマイケル・ジャクソンの「ブラック・オア・ホワイト」のミュージックビデオや、「ターミネーター2」のような映画で広く知られるようになりました。それらは高度なコンピュータグラフィックスでしたが、SVGを使えば、ウェブ開発者は同様の魅力的な形状変化アニメーションをブラウザで直接作成できます。

まとめ

SVGのモーフィングアニメーションは、<path>要素のd属性をSMILでアニメーションさせることで実現できます。滑らかなモーフィングのためには、変化させるパス間でアンカーポイントの数や順序を近づけることが重要です。

SMILによるモーフィングは手軽ですが、より複雑な制御や異なるポイント数を持つパス間の自然なモーフィングには、GreenSock (GSAP) のMorphSVGPluginのようなJavaScriptライブラリが非常に強力なツールとなります。モーフィングは視覚的なインパクトが大きいため、適切に使うことでウェブサイトやアプリケーションの魅力を高めることができます。

これで「リッチなSVGサンプル集」は終わりです。次は、SVGを使った「付録B1: ドットキャッチゲーム」で、SVGのインタラクティブな側面をさらに探求しましょう！

このページの要約

日本語

SVGモーフィングは、ある図形が別の図形へ滑らかに変化するアニメーションです。主にSVGの<path>要素のd属性（パスデータ）を時間変化させることで実現します。SMILの<animate>要素でattributeName="d"とし、values属性に複数のパスデータを指定することで、形状間のモーフィングが可能です。自然なモーフィングのためには、変化前後のパスでアンカーポイントの数や順序を近づけることが推奨されます。より高度なモーフィングにはJavaScriptライブラリも利用されます。

English

SVG morphing is an animation where one shape smoothly transforms into another. It's primarily achieved by animating the d attribute (path data) of an SVG <path> element over time. Using SMIL's <animate> element with attributeName="d" and specifying multiple path data in the values attribute allows for morphing between shapes. For natural morphing, it's recommended to keep the number and order of anchor points similar between the start and end paths. JavaScript libraries are also used for more advanced morphing.

Español

El morphing SVG es una animación en la que una forma se transforma suavemente en otra. Se logra principalmente animando el atributo d (datos de la ruta) de un elemento <path> de SVG a lo largo del tiempo. Usando el elemento <animate> de SMIL con attributeName="d" y especificando múltiples datos de ruta en el atributo values permite el morphing entre formas. Para un morphing natural, se recomienda mantener similar el número y orden de los puntos de anclaje entre las rutas de inicio y fin. También se utilizan bibliotecas de JavaScript para un morphing más avanzado.

中文

SVG变形动画是一种使一个形状平滑地转变为另一个形状的动画。它主要通过随时间动画化SVG <path>元素的d属性（路径数据）来实现。使用SMIL的<animate>元素，设置attributeName="d"并在values属性中指定多个路径数据，可以实现形状之间的变形。为了自然的变形效果，建议在起始路径和结束路径之间保持锚点数量和顺序的相似性。JavaScript库也用于更高级的变形效果。