SVGアニメーション、作り方。
CSSアニメーション、作り方。
⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。
こんにちは、「ふ」です。
web上で時折見かける、線を描いていくSVGアニメーション。これはどういう仕組みになっているのでしょうか。
実は「線を描いていく」ためのメソッドやプロパティはいまのところ存在しません。
これはSVGの破線を指定するプロパティです。
この２つの値を時間にそって変化させることで実現しているのです。
今回はその仕組みについて「理解」していきましょう。
stroke-dasharray/dashoffset。
stroke-dasharrayとstroke-dashoffset、２つのプロパティを単純な線分で試してみます。
SVGで長さ800pxの直線を引きました。id名は「line」としています。
破線のピッチを指定する、stroke-dasharrayを指定してみましょう。
破線と間隔がそれぞれ200pxになりました（間隔部分には色をつけてあります）。
次に、stroke-dashoffsetを使ってみましょう。このプロパティは、破線の始まりの位置を指定します。100px分ずらしてみます。
破線の開始位置がマイナス方向に100pxずれています。
「破線の始まり」が、スタート地点から100px分「隠れている」状態ですね。
値をデカくしてみる。
プロパティの性質がわかったところで、一旦dashoffsetの指定はキャンセルします。そして今度はdasharrayの値を線分いっぱい（800px）にしてみます。
線分の全長と破線のピッチが同じになったため、見た目は破線ではなくただの直線のようになりました。この状態を①とします。
ここから、dashoffsetも800pxにしてみます。
破線のピッチは線分いっぱいのまま、開始位置も線分の長さだけマイナス方向にずらしました。
線は存在しているのですが、何も描かれていない状態に見えますね。この状態を②、としたとき。
これら①と②の状態をアニメーションで推移させてみましょう。
dasharrayの値は800pxのままで固定、dashoffsetを時間とともに変化させます。
まるで何もない状態から線が描かれていくようなアニメーションになりました（背景のグレーの線は消してあります）。
これが線アニメーションの仕組みです。破線のピッチと開始位置をパスの全長以上の値に指定しておいて、時間とともに開始位置をずらしていく。
そうすると「線が描画されていく」ように見せることが出来るというわけです。
図形でやってみる。
もちろん、色々な図形で線アニメーションを実装することができます。
角丸長方形で試してみましょう。
Vectornatorやイラレなどのグラフィックソフトを使って角丸長方形を書きました。
これをSVGファイルとして書き出すのですが、その前にちょっと下準備。
パスの方向と開始点を確認/調整しておきます。
今回はこのように左上からスタートし、時計回りに線が描かれるようにしたい。
オブジェクトを選択し、線の終点を矢印形に装飾してみます。
これを見ると線の方向は時計回りになっているので問題なさそうですね。もし反時計回りになっている場合は、「パスの方向反転」で反転させましょう。
そして、矢印型になっている場所が線の終点です。
これが右下になっているということは、線の始まりも右下から、ということに成増。〜開始位置は左上に持っていきたかったのだが。
ここで裏技。現在角丸長方形はクローズドパスです。
ハサミツールを使って、アニメーションを開始させたい位置でちょん切ってしまいましょう。
切り込みを入れるだけなので、見た目は繋がったままです。
カットしたのち、終点を装飾して確認。最初の予定どおり左上になっていますね。
これで下準備はOKです。SVGで書き出しましょう。
コード。
SVGで書き出し、HTMLに落とし込みました。
角丸長方形のタグにはid名「rect1」を追記しています。
◼︎ HTML
SVGコードをHTMLに落とし込む方法はこちらの記事で紹介しています⬇︎
SVGコード、読み方（構成を知る）。
HTMLの<head>部分にCSSを書いて参照させます。１つの破線が図形を１周するよう、dasharrayは角丸長方形の線の全長よりも大きな値を指定しましょう。
◼︎ CSS
プレビューしながら値を調整していきましょう。ここでは1600pxで、破線が角丸長方形を１周しました。
続いてアニメーションプロパティを指定します。
アニメーションの指定は、
・アニメーション名：line_move
・所要時間：5s
・繰り返し：infinite（無限）
としました。
タイムラインを書いていきます。
offsetの値以外は、先ほどの直線のときと同様です。
結果を見てみましょう。
できました。
ロリポップ！の取次店になりました。
テキストの輪郭。
これも時折見かけます、テキストの輪郭に線のアニメーションを施したもの。
やり方はこれも同じです。テキストをアウトライン化させたものをSVGで書き出し。
ただし、開始位置や線の方向は調整していません。
テキストに使われているオブジェクトの全てをグループ化し、適正なstroke-dasharrayの値を指定。
その後、同様にCSSでアニメーションを書きます。
アウトライン化させたテキストはところどころ複合パス化しているので、線の方向も部分的に逆になっていたりします。
これについては敢えて線の方向や始点を揃えず、ランダムにしたまんまでも面白いですね。
考えた人すごい。
今回は一般的に使われている「SVGの線アニメーション」について紹介しました。最後までお読みいただき、ありがとうございます。
冒頭でも述べましたが、SVGにはストロークアニメーションのためのメソッドなどは用意されていません。そこで、破線のプロパティを上手く利用して「描画している」感を表現する。この方法を考えた人、すごいですね。
「ふ」も最初にこの実装を見たとき、何をどうやっているのかよく解らなかったんです。もし同じ疑問を抱いている人がいたら・・と思い、なるべく噛み砕いて紹介させていだだきました。
ではまた次のアニメーションでお会いしましょう ♪
関連記事
複合パスとパスの方向について 〜Vectornator。
Vectornator、SVGを書き出してwebに配置。
SVGアニメーション、エンドレスに流れる画像。
2020.07.23
〽️ タイトル部分に使えそう？ふふふ。
SVGアニメーション06、アニメーションに合わせてテキストの色を反転。
2020.07.15
〽️ ３つの長方形を動かします。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。