解 説

今回ははSVGのpathに沿ってDOM要素をアニメーションさせる方法です。

SVGのpathに沿ってアニメーションさせる

CodeGridの記事が元ネタです。(有料ですがフロントエンドの方にはお勧めのサイトです。)

シンプルなサンプル
このサンプルのアニメーションの仕組みは刻々と進む時間に対してpathの特定の長さを指定して、getPointAtLengthで現在のpath長さの座標を導き出します。その座標を円の中心座標にすることで移動をさせています。

具体的にはタイマーはsetIntevalを使用せずに、requestAnimationFrame()を使うことで代用しています。
requestAnimationFrameはブラウザの再描画の準備が整ったら次の関数を読み込みます。読み込む速度はブラウザに依存しています。そのため、経過時間を取得する処理を追記する必要があります。今回は変数elapsedTimeに現時刻から経過時間を算出して使用しています。

HTMLコード

JavaScriptコード

パララックスとして活用

サンプル
先のサンプルをスクロール量に基づいて移動するパララックスタイプに変更したものです。

pathの長さと最大スクロール量をJavaScriptで取得して、pathLength/scrollMaxとすることでちょうどスクロールが終了した時点でpathの終点に移動できるように変数speedを設定しました。
尚、最大スクロール量取得は「window.scrollMaxY」ではChromeなどで使えません。「document.documentElement.getBoundingClientRect().height – window.innerHeight」で代用しています。

サンプルは解りやすいようにpathに水色を着けていますが、実際はstroke=”none”として透明にしておきます。

HTMLコード

JavaScriptコード

imgタグで挿入したSVGをアニメーション

サンプル
パララックスタイプのサンプルをさらにimgタグで挿入した画像(今回はSVG画像、どんな形式のものでもOK)をアニメーションしました。これはDOM要素にアニメーションをさせることも可能な証拠です。つまりどんな要素でもpathに沿ってアニメーションできるということです。

HTMLコード

CSSコード

JavaScriptコード