svgアニメーション（2）— setIntervalを使ったアニメーション

jQueryを使ったアニメーションの原理

まず、jQueryとはjavascriptを簡単に扱うことができるようにする「ライブラリ」と呼ばれるファイルの代表みたいなものでして、ウェブ上に有益な情報もたくさんあるため、ここではjQueryの紹介やインストール方法については割愛させていただきます。
jQueryでアニメーションというと、jQueryを知っている方は、「jQueryにはanimateという素晴らしいメソッドがあるじゃないか」と思われるかもしれませんが、残念ながらsvgのstroke-dashoffsetのプロパティについては、animateメソッドではアニメーションさせることができません。
ですので、今回は昔ながらの方法（？）でのアニメーションの実装方法を簡単にご紹介していきたいと思います。
映像一般に言えることなのですが、モノや人が動く一瞬一瞬を切り取った静止画を連続して見せると、あたかも滑らかに動いているように見えてしまうという人間の目の錯覚を利用しています。
それをjQueryを利用して（地道に）実現しようとする場合、一定間隔で処理を行なうsetTimeoutやsetIntervalといったメソッドを利用して、例えば「1秒間に点Aから点Bまで、点Xが移動する」といったような場合、まず一秒間に何コマ画像を用意するか（「フレームレート」）を決めた上で、点Aから点Bまでの距離を「L」とすれば、点Xを「　L　/ フレームレート 」の距離毎コマ動かした画像を、「 1 / フレームレート 」秒ごとに見せることで実現することができます。
今回はsetIntervalを使った、手書き風のsvg文字のアニメーションの実装方法をご紹介したいと思います。

setIntervalを使った手書き風のsvg文字のアニメーション

ただ点が移動する、というのとは違って見えますが、svgの手書き風アニメーションについても、先程ご紹介した原理の応用で実現することができます。
先程の「点X」を「 描画される線の先端 」、「 点Aから点Bまでの距離 」を「 svgのパスの長さ 」として考え、

1. 「描画される線の先端」 = 「stroke-dashoffset」の値を、
2. 毎コマ毎に「 svgのパスの長さ / フレームレート 」、
3. 最大値（ svgのパスの長さ ）から減らして行く

という処理を行います。
【1】の処理は、対象のオブジェクトのプロパティの値を変更する、その名もattrというjQueryのメソッドを利用し

var path = $('#stroke'),
length = <先端の位置>;
path.attr('stroke-dashoffset',length);

とて、
【2】の値については、パスの長さが今回は1646、1秒間に30フレーム処理をするとして、

var path_length = 1646,
frame_rate = 30,
stroke_per_frame = path_length / frame_rate;

【3】は【1】と【2】を組み合わせて、setIntervalを利用して、

See the Pen SVG Handwrite-Text with JQuery by Shinji Yamamoto (@commono_yamamoto) on CodePen.

という比較的シンプルな書き方で実装が可能です。

※もし↑にcodepenが表示されていなかったら大変、お手数ですが、リロードをお願いします。。
※今回は一度書き終わったら止まるという処理になっていますので、すでに書き終わっていたら「RERUN」のボタンを押して下さい。