SVGとアニメーション１〜pathに沿って移動するアニメーション | IT工房｜AI入門とWeb開発

SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。（有料ですがフロントエンドの方にはお勧めのサイトです。） シンプルなサンプル このサンプルのアニメーションの仕組みは刻々と進む時間に対してpathの特定の長さを指定して、getPointAtLengthで現在のpath長さの座標を導き出します。その座標を円の中心座標にすることで移動をさせています。 具体的にはタイマーはsetIntevalを使用せずに、requestAnimationFrame()を使うことで代用しています。 requestAnimationFrameはブラウザの再描画の準備が整ったら次の関数を読み込みます。読み込む速度はブラウザに依存しています。そのため、経過時間を取得する処理を追記する必要があります。今回は変数elapsedTimeに現時刻から経過時間を算出して使用しています。 HTMLコ