SVGのパスアニメーションはgetTotalLengthメソッドが便利

はじめに

こんにちは。CMA制作部スタッフYaatonです。
SVGを使ったアニメーションは細かい設定ができ、こだわった動きができるので実装する機会も多いのではないでしょうか。今回はSVGのパスアニメーションを実装するときに便利な記述や、つまづきがちなポイントを紹介したいと思います。

SVGのパスアニメーションとは

SVGのパスアニメーションとはstroke-dashoffsetプロパティを使って破線の間隔を変化させることで、あたかも線が描かれているかのような演出ができるアニメーションです。

See the Pen svg path animation(css) by CMA Designer (@CMA-Designer) on CodePen.

これをCSSのanimationで実装すると以下の様になります。

@keyframes pathAnime {
	to {
		stroke-dashoffset: 0;
	}
}
svg {
	path {
		stroke-dashoffset: 534.559px;/*パスの長さ*/
		stroke-dasharray: 534.559px;/*パスの長さ*/
		animation: pathAnime 1s linear forwards;
		fill: none;
		stroke: blue;
		stroke-width: 6px;
		stroke-linecap: round;
		stroke-miterlimit: 10;
	}
}

ポイントはパスの長さを指定するということです。パスと同じ長さの破線間隔を移動させることによりあたかも線が描かれたり、逆に線が消えていったりといった演出をさせることができます。

パスの長さをイラストレーターで見る

実はイラストレーターでパスを選択した状態で以下を見るとパスの長さを見ることができます。
「ウィンドウ」>「ドキュメント情報」> ≡（パネルオプション）>「オブジェクト」にチェック

しかし、この部分を毎回見に行くというのはかなり面倒だと思います。しかもSVGをエクスポートするたびに線の長さを修正する必要があります。

パスの長さを取得するgetTotalLengthメソッド

そこで、JavaScriptには選択したpathオブジェクトの長さを取得できる便利なメソッド「getTotalLength」を利用します。
https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength

const path = document.querySelector('svg path');
path.getTotalLength();

パスの長さを取得できれば、path要素にカスタムプロパティを設定してもいいですし、JavaScriptのWeb Animations APIで書けばもっと痒いところに手が届く操作ができます。

//JS側でカスタムプロパティを設定する。path要素毎に値が設定される。
path.style.setProperty('--path-length', path.getTotalLength());
//↑これをCSSの中でvar(--path-length)として使用する

Web Animations APIでパスを動かす

//Web Animations APIでパスを動かす
const path = document.querySelector("svg path");
const pathLength = path.getTotalLength();
//初期値を設定
path.style.strokeDashoffset = pathLength;
path.style.strokeDasharray = pathLength;
path.animate(
		[
			{
				strokeDashoffset: pathLength,
			},
			{
				strokeDashoffset: 0,
			},
		],
		{
			duration: 1000,
			easing: 'linear',
			fill: 'forwards',
		}
	);

See the Pen svg path animation(js) by CMA Designer (@CMA-Designer) on CodePen.

その他パスのアニメーション関係でつまづきがちなところ

• strokeDashoffsetに負の値を設定するとSafariではアニメーションしない仕様になっています。負の値を設定する場合は注意が必要です。
• パスが動く方向が違っていたらイラストレーターで「オブジェクト」→「パス」 → 「パスの方向反転」で方向を変えることができます。

まとめ

SVGのパスアニメーションを実装する際に便利なJavaScriptのメソッドを紹介しました。SVGのアニメーション=CSSで実装というふうに限定せず、JavaScriptの機能も組み合わせて実装することでアニメーション幅や効率性が高められるのではないでしょうか。
是非参考にしてみてください。