SVGのモーフアニメーション：動かす前にパスを対応させる
コマンド構造、角の順序、穴を確認してSVGの形状モーフ用パスを準備します。独自の例を開始、中間、終了で検証します。
目次
輪郭を保ちながらマーク全体を回すなら、代わりにSVGの共通回転中心を設定します。
SVGのモーフアニメーションは、2つの状態間で形状を変えます。パスデータをネイティブに補間するには、コマンド構造を合わせ、どの点を対応させるか決めます。両端の絵がきれいでも、途中で潰れたりねじれたりする場合があります。
W3Cのパスデータのアニメーション規則は、滑らかな補間に同じ数・種類・順序のコマンドを要求します。これは構造の要件です。ロゴのどの角を次の状態のどの角にするべきかは決めません。
確認できる小さな組から始めます。以下の独自例では、正方形、ひし形、意図して角の順序を逆にした正方形を使い、2つの判断を分けます。
対応する角を持つ2つのパスを作る
手書きの正方形とひし形は、どちらもM L L L Zを使います。最初の角へ移動し、3本の線を描いて閉じます。各座標の組に、他方のパスの対応位置があります。
<svg id="matched" viewBox="0 0 160 160"
xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Square morphing into a diamond">
<path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
<animate attributeName="d" dur="2s" begin="0s"
fill="freeze" calcMode="linear"
values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
</path>
</svg>SVGのanimate要素は、時間とともに属性を変えます。ここでは2秒でdを変えます。アニメーションのfill="freeze"は最終状態を保持し、パスの緑のfillは別の描画設定です。
確認中は、単独のHTMLページに例を置きます。以下の確認スクリプトがなくても自動で開始します。製品用の操作では、再生時期を決め、UIに適した静止状態を提供します。
角の対応は明示的です。
| パス内の位置 | 正方形 | ひし形 |
|---|---|---|
| Mの後の最初の角 | 左上、30 30 | 上、80 20 |
| 2つ目の角 | 右上、130 30 | 右、140 80 |
| 3つ目の角 | 右下、130 130 | 下、80 140 |
| 4つ目の角 | 左下、30 130 | 左、20 80 |
両方の輪郭は同じ方向に周囲を進みます。最初の角はひし形の上へ、2つ目は右へと移動します。意図して作ったデザインの選択で、形の意味の解釈ではありません。
実際の補間を停止して確認する
イージングや装飾を加える前に、開始、中間、終了を確認します。上のSVGでは、次のヘルパーでタイムラインを止め、秒単位の時刻へ移動できます。
const svg = document.querySelector('#matched');
function showMorphAt(seconds) {
svg.pauseAnimations();
svg.setCurrentTime(seconds);
}
showMorphAt(1); // Midpoint of the two-second animationMDNは、SVGタイムラインを制御するpauseAnimations()とsetCurrentTime()を説明しています。値0、1、2のボタンへヘルパーを接続します。1つの補間内の3位置であり、3つの置き換え画像ではありません。
1秒では、線形補間により各座標が両端値の中間になります。最初の角は55, 25です。独自例の中間全体は次のとおりです。
M55 25L135 55L105 135L25 105ZブラウザーでネイティブSVGアニメーションの開始、中間、終了を確認し、1回再生しました。中間は塗りのある四角形を保持し、再生はひし形へ到達しました。テストしたブラウザーの手書きパスの観察で、PerfectVectorの変換結果やブラウザー間の互換性テストではありません。
コマンド数が同じでもモーフが崩れる場合がある
開始の正方形を保ち、対象の正方形の角の順を反転します。
Start: M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z両端は同じ正方形に見え、文字列はどちらもM L L L Zです。しかし、2つ目と4つ目の角は形を横切って入れ替わります。中間では座標が一致します。
M30 30L80 80L130 130L80 80Z4点がすべて対角線上にあります。ブラウザーテストでは、塗りの正方形が中間でその対角線へ潰れ、最後に正方形へ戻りました。コマンド構造を合わせることで補間は可能になりましたが、誤った点の対応が望ましくない結果を作りました。
書き出した組がねじれるなら、各パスの最初の点と進む方向を確認します。その後、角や曲線の特徴が対応位置にあるか調べます。むやみにノードを増やすと見分けにくくなります。ノード整理のガイドは静止画像の簡略化に役立ちますが、両状態で決めた対応を保持します。
穴と別の部品も対応させる
ロゴには外側の境界、穴、離れたアクセントがある場合があります。それぞれ、次の状態に意図した対応相手が必要な部品として扱います。アニメーション前に、何が何へ変わるか一覧にします。一方に穴があり他方にない場合は、ノード数が同じなら解決すると考えず、穴をどう消すか決めます。
fill-ruleリファレンスは、SVGがパス内の領域を決める方法を説明しています。複合パスの準備とテストで意図した塗りを保持します。静止した両端ですでに穴が誤っているなら、変化を加える前に穴が埋まる問題のガイドを使います。
実用的な確認順序は次のとおりです。
- 両端の輪郭、穴、離れた細部を確認します。
- 対応するサブパスや別要素を特定します。
- 開始点、方向、重要な特徴を合わせます。
- 中間の境界交差や消える細部を確認します。
- 形状を承認してからタイミングを調整します。
小さなアクセントを独立してフェード・移動させるなら、別要素が制御しやすい場合があります。アニメーション設計の選択であり、1つの複合パスへ無理に入れる必要はありません。
使うアニメーション方式の規則を確認する
ネイティブの例は意図してコマンドを合わせています。ライブラリが追加の準備を行う場合、要件は異なるかもしれません。
GSAPのMorphSVGドキュメントは、パスデータを3次曲線へ変換し、必要に応じて点を追加すると説明しています。shapeIndexなどの対応制御も提供します。独立して書き出した2形状が一致すると想定せず、それらで対応を確認します。
KUTE.jsのSVG Morphガイドは、サブパスの別手順も含む異なる準備モデルを説明しています。ネイティブの制限や他ライブラリの助言を適用する前に、実際のバージョンとコンポーネントを確認します。
その方式に代表的な小さな組を選び、中間形状を確認します。正方形からひし形への成功は、細かい複合ロゴの動作を証明しません。準備中の変更と元のデザインを区別できるよう、元画像のコピーを保持します。
状態を対応させる前にラスター画像を準備する
ベクターマスターがなく、PNGやJPGしか残っていないなら、PerfectVectorの画像をベクターに変換する手順で編集可能なSVG候補を準備できます。輪郭、穴、別領域を元画像と比較し、ダウンロードしたパスを確認します。SVGの編集ガイドは、次の整理工程を扱います。
2枚の画像をベクター化しても、点間の意味的対応や完成したモーフは作られません。まず各静止画像を承認し、選んだアニメーター用に組を準備します。編集可能なマスターがあれば、ラスターのコピーを再トレースせず、それから作業します。
パスの組に重要な変更を加えるたびに中間を試します。単純な両端が役立つのは、変化が意図した特徴に沿う場合だけです。ブログの編集記事に関連する準備の説明があります。
よくある質問
モーフにはSVGパスの点数をそろえる必要がありますか？ ネイティブのパスデータ補間では、コマンドの種類と順序を含む構造の一致が重要です。ライブラリは異なる構造を正規化する場合があるので、点数だけに頼らず自身のドキュメントを確認します。
両端が正しいのにモーフがねじれるのはなぜですか？ 点の対応順が意図と違う場合があります。開始点、方向、特徴の対応を確認し、中間を調べます。同じ両端の輪郭でも、途中の潰れを隠している場合があります。
2つの別SVGファイルを自動でモーフできますか？ アニメーターには、互換性があるか正規化された形状と、有用な状態間の対応が必要です。拡張子が同じだけでは対応は得られません。パス、穴、別部品を確認します。
2つのPNGをSVGへ変換すると対応済みのモーフになりますか？ いいえ。変換は静止ベクターの候補を準備します。部品と点を対応させ、方式を選び、変化を確認する必要があります。
参考資料
- W3C — SVGのパス — ネイティブのパス補間構造とパラメーター対応。
- MDN — animate — 時間に沿う属性アニメーション。
- MDN — pauseAnimations — 確認用タイムラインの一時停止。
- MDN — setCurrentTime — 秒単位のSVGタイムライン移動。
- MDN — fill-rule — 複合画像の内部領域の動作。
- GSAP — MorphSVG — 正規化と点の対応制御。
- KUTE.js — SVG Morph — コンポーネント固有の準備とサブパスの手順。
タイミングを磨く前に部品を対応させ、中間を確認します。元がラスターなら、SVG候補を準備し、静止形状を検証してから、対応するアニメーション状態を作ります。
