SVGをアニメーションさせて線を描画する

デモ

ボタンを押すと線がアニメーションして描画される。

SVGを使ったアニメーションするチェックボックスが新鮮だったので、自分もやってみることにした。
Animated Checkboxes and Radio Buttons with SVG | Codrops

そこでSVGのアニメーションについて紹介されていたページを参考にSVGアニメーションを試してみた。
Animated line drawing in SVG - JakeArchibald.com

SVGってなに?

ベクターデータで書かれた画像。どれだけ拡大しても粗くならないのが特徴。
2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

どうやってSVGを作成する?

Adobe IllustraterでSVG書き出しもできるが、有料ソフトで持っていない。ここはフリーソフトを使ってみる。

・InkScape
Draw Freely | Inkscape
FAQ (Japanese) - Inkscape Wiki

JSでSVGを操作する

まだまだわからないことも多いが、ドキュメントを掲載しとく。

・ドキュメント
Styling — SVG 2

アニメーションはCSS3のtransitionを使用する。

jQueryは使えない

SVGDOMはHTMLDOMと違う物なので、HTMLDOMを対象としたjQueryは使えない。
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_15.htm

webkitTransitionが使えない

Uncaught TypeError: Cannot set property 'webkitTransition' of undefined

Chromeなのになぜか使えなかったので、prefixなしで書いた。

最初の「w」は大文字でも動くが、一応小文字らしい。
web帳 | JavaScriptでCSS3スタイル設定 : css3とJavaScriptの連携

アニメーションの準備

//pathの要素
var path = document.querySelector("#box path");
//線の長さ
var length = path.getTotalLength();

SVGのタグを取得。そしてパスの長さを取得する。

//点線の一つの長さと間隔
path.style.strokeDasharray = length + " " + length;
//点線のずれ
path.style.strokeDashoffset = length;

まず線を点線にする。その点線の長さと、余白を線の長さにする。

次に点線を長さの分だけずらす、そうすると線は見えなくなる。

詳しくは、デモページの真ん中辺りを見るとわかる。
Animated line drawing in SVG - JakeArchibald.com

アニメーションさせる

path.getBoundingClientRect();

「getBoundingClientRect」は要素の絶対座標を求めることができる。これの使い方よくわかない。
新JavaScript例文辞典

デモのコメントにはこう書いてある。

// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();

アニメーションのスタート位置を算出しているらしい。

path.style.transition = "stroke-dashoffset 10s ease-in-out";

CSSのtransitionを「stroke-dashoffset」に設定させる。これでオフセット値を返れば、「ease-in-out」で変化する。

//ボタンのカウント
var btnCnt = 0;
$("#btn").click(function(){
    if(btnCnt % 2 == 0){
        path.style.strokeDashoffset = "0";
    }else{
        path.style.strokeDashoffset = length;
    }
    btnCnt++;
});

ボタンをクリックしたらオフセットを0,線の長さに切り替えられるようにした。ボタン操作にはjQueryは使える。