2017-8-12
SVGで進捗を表示する円をアニメーションさせる
円形の進捗を表示するデザインは d3.js にデフォルトで用意されているが、それだけの為に d3.js を利用するのはオーバーな感じがする。
SVG に関して無知だったので調べてみたら、d3.js をわざわざ使わなくても結構簡単に実装出来たのでまとめておく。
path の d 属性を弄る
一番最初はこの方法で実装した。
そこまで複雑ではないが、三角関数を利用して計算する必要があったりと多少面倒。
stroke-dasharray/stroke-dashoffset を利用する
SVG では、path を点線として表現することが可能。
stroke-dasharrayで各点線の長さ、stroke-dashoffsetで点線の開始位置を設定することが出来る。
点線本来の用途ではないが、この２つを利用して線をアニメーションさせることが可能。
path の内容が動的に変化する場合はこの手法は取れないが、path の内容が固定の場合この手法でアニメーションさせるのが手軽。
パスに沿ってオブジェクトを移動させる
getTotalLengthとgetPointAtLengthを利用する。
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。