SVGで進捗を表示する円をアニメーションさせる

円形の進捗を表示するデザインはd3.jsにデフォルトで用意されているが、それだけの為にd3.jsを利用するのはオーバーな感じがする。

SVGに関して無知だったので調べてみたら、d3.jsをわざわざ使わなくても結構簡単に実装出来たのでまとめておく。

pathのd属性を弄る

DEMO

一番最初はこの方法で実装した。

そこまで複雑ではないが、三角関数を利用して計算する必要があったりと多少面倒。

stroke-dasharray/stroke-dashoffsetを利用する

SVGでは、pathを点線として表現することが可能。

stroke-dasharrayで各点線の長さ、stroke-dashoffsetで点線の開始位置を設定することが出来る。

点線本来の用途ではないが、この2つを利用して線をアニメーションさせることが可能。

DEMO

pathの内容が動的に変化する場合はこの手法は取れないが、pathの内容が固定の場合この手法でアニメーションさせるのが手軽。

パスに沿ってオブジェクトを移動させる

DEMO

getTotalLengthgetPointAtLengthを利用する。

getTotalLengthはパス全体の長さ、getPointAtLengthはパスの開始地点から引数分進んだ際の座標を返却する。

var $route = $component.find('.m-svg01_route').get(0);
var routeLength = $route.getTotalLength();
var progress = 0.5;

// パス全体の半分だけ進んだ際の座標が取得できる。
var point = $route.getPointAtLength(routeLength * progress);

取得した座標を元に、移動させたいオブジェクトの座標をtranslateなりで移動させればOK。

参考

svg要素の基本的な使い方まとめ

SVGによる円弧の描画サンプル

SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG