2017-8-12

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