SVG、モーションパスで複数の要素を動かす。

実装コード。

１つの要素に対して仕込むモーションパスのコードはこちら。

１要素を構成しているパスなどのオブジェクトを<g>〜</g>で囲んでグループ化〜ひとまとめにします。その内部にアニメーションを記述するんでしたね。

動かしたい要素は６文字。その１つ１つにアニメーションを実装していきます。
ただし同じ設定では、全ての要素が同時にモーションしてしまいますよね。そこで今回使用するのが「begin属性」です。

begin属性は<animateMotion>タグの属性として記述します。
例えばbeginの値を「1s」に指定した場合。アニメーションが１秒遅れて開始されます。
元々のdur（継続時間）が終了してもそこでアニメーションが終了するわけではなく、（遅れ１秒＋継続時間）の分だけ継続するため、途中で途切れずに完走させることができます。

この「開始時間の遅れ」を各要素ごとにずらして実装していけば、要素が順に流れていくようなモーションパスが実現します。

基本的な原理はこれでOKなのですが、画像作成時、コーディング時にはいくつか調整すべき事項があります。
順にみていきましょう。

画像を準備。

ベクターソフトで画像を準備していきます。今回はイラレを使用しました。

出力する画像はA4サイズとしました。
アニメーションさせる要素を描きます。今回はテキストを使ったので、アウトライン化させました。

SVG形式で書き出した時に認識しやすいように、各オブジェクトに名前を付けておきましょう。「ch１〜６」としました。

イラレで書き出した場合、ここに付けた名前がタグのid属性に指定されます。

◼︎ ターゲットパスの方向。

モーションの軌道となるパスを描き、これにも名前を付けておきます。「target」としました。

今回は要素が右から左へと流れるモーションパスにしたいので、このターゲットパスの方向を確認しておきましょう。

方向の確認には、先端形状を施してやるとわかりやすいです。
終点を矢印にしてみました。右側が矢印になっているということは、パスの方向は左から右になってしまっている、ということに成増。
これでは反対側からモーションパスが始まってしまいます。

「パスの方向反転」で、向きを右から左に変えておきます。

◼︎ パスの終点を十分に長くとる。

ターゲットパスの端部は、アートボードから適正な量だけはみ出させておくことをお勧めします。

アニメーションさせる要素の大きさ分、アートボードからはみ出すようにしましょう。
アニメーションさせた時、要素をviewport（可視範囲）の完全に外側から出現させるためです。
いちばんデカい要素の「ジ」のサイズにあわせておきました。

◼︎ アートボードを実際より高く。

これは可視範囲をコントロールするための下準備です。

要素とターゲットパスが描画できたら、アートボードを上方向に広げておきます。
その大きさは、アニメーション要素が完全に納まる幅で。今回は120px引き伸ばしました。
元の高さから何px引き伸ばしたかを、覚えておいてください。

◼︎ 要素の中心を原点に。

最後にアニメーションさせる要素の全て、その中心をアートボードの左上（0,0）に配置します。理由は前回の記事で説明しています。

複数の要素を重ねるので、見辛い場合はほかの要素を非表示にしながら操作しましょう。
オブジェクトのバウンディングボックスの変形点が、アートボードの外枠と重なっていればOKです。

これで画像は完成。要素が重なっていますが問題ありません。

アニメーションを仕込む。

画像が完成したら、SVG形式で書き出します。
id名を付けておいたので、認識するのが楽ですね ♪

描画タグのコードは上に書かれているものが背面に配置されます。
ターゲットとなるパスが最背面に置かれていて、id属性が付けられているか確認しておきましょう。

最初の要素が書かれている部分です。もし<g>〜</g>で囲まれていなければ、グループ化させましょう。
続く要素も同じく確認してください。

animateMotionタグとmpathタグを追記して、動かしてみます。

とりあへずは動きました。なんだか逆さまですね。
画像作成時に「パスの方向反転」を行なったので、どうやら上下方向も反転してしまったようです。

要素自体も反転させて対応しましょう。
現在animateMotionのrotate属性の値は「auto」となっていますが、これを「auto-reverse」に変更します。

正しい向きになりました。

後に続く要素に対し、<animateMotion>タグの中にbegin属性を追加することで、少しずつアニメーション開始のタイミングをずらしていきます。
遅らせる間隔は0.2秒ごとに指定しました。

数値はあくまでデフォルトの開始時間に対しての遅れを指定するため、累積したものを指定していきます。

記述が終わったら、実行してみましょう。

このようになりました。
beginの値に関しては、一連のアニメーションがスムーズに見えるよう、プレビューしながら丁寧に調節していきましょう。

では最後の仕上げです。

viewboxの上部を非表示。

さきほど各要素のアニメーション開始にはタイムラグを設けました。
実装してみるとわかるのですが、初回ロード時には左上にアニメーション開始を待機している残りの要素が見えてしまっています。
これを非表示にしたいのだが。

ここで画像作成時にアートボードを上方向に伸ばした処理が意味をもってきます。確か120px分でしたね。

今回は力技ではありますが、伸ばしていたviewbox（可視範囲）の上部を隠してしまいましょう。

方法は簡単です。svgタグにあるviewBoxのY座標の開始位置は現在「０」になっているのですが、これを書き換えるだけだけです。

実はこの「左上に要素が残る」現象に対しての策は他にもあるのですが、次回の記事に取っておきたいと思います。とりあへず今回は「力技」で。

うまくいくでしょうか‥ プレビューしてみます。

うまくいきました。お疲れ様です！
画像サイズも本来のA4に戻りました。お好みでターゲットパスを非表示にしてください。

ハマり項目まとめ。

最後までお読みいただき、ありがとうございました。
複数の要素をSVGコードでモーションパス。やることがいっぱいありましたね。
ここでまとめておきます。

全てのケースに当てはまるとは限らないのですが、モーションパスでハマった時はこの辺りを確認してみると良いかと思います。
ちなみにSVGモーションパスシリーズ、第３弾まで続きそうです。またお会いしましょう〜 ♫