svg アニメーション（3）— jQuery Easing Pluginの裏技

jQuery Easing Pluginの裏技（？）

「jQuery Easing Plugin」そのものはとても有名なプラグインですので、
そのものの詳しい説明や導入方法については割愛させていただきたいのですが、
一番基本的な使い方は、

var easing = 'easeInOutQuad',
duration = 2000;
$bar.animate({left : 100 + '%'}, duration , easing );

というように、jQueryのanimateメソッドの引数に予め用意されたイージングの名前を渡してあげることで、アニメーションの動き方を変化させるという使い方です。
ここではそのプラグインのあまり知られていない裏技（？）的な使い方をご紹介したいと思います。
さて、まず何が裏技かといいますとこのjQuery Easign Pluginは、
jQueryでもともと用意されているanimateやslideUpといったメソッド以外にも自作のアニメーションメソッドにも
利用することができるということです。
※ 裏技といいつつ配布元のhttp://gsgd.co.uk/sandbox/jquery/easing/のページ右下で普通に紹介されていますが。。
裏技としての使い方は、

jQuery.easing.method( // methodには「easeInOutQuad」や「easeInOutElastic」などのイージングの名称が入ります
null†, // この用法では値を渡す必要がないためnullを代入します
current_time, // 現在の時間
start_value, // 最初の値
end_value, // 最終的な値
total_time // アニメーションの合計時間（持続時間）
)

といった値をわたしてあげることで、イージングを適用した場合の「現在の時間 / 合計時間」での変化途中の値を取得することができるのです。

jQuery Easing Pluginの裏技を利用したsvgのアニメーション

さて、前回のコードを、＜裏技＞を使ったアニメーションにするためには、全体的に少々書き換えが必要になってきますが、まず最終型のコードはこちら↓

See the Pen SVG Handwrite-Text with jQuery and jQuery Easing Plugin by Shinji Yamamoto (@commono_yamamoto) on CodePen.

今回書き換えた箇所は大まかに

1. 変数の追加
2. jQuery Easingを使った値の取得
3. 「現在の時間」を変化をさせる

の３箇所です。
【1】変数の追加は、jQuery Easing Pluginをを使うために必要な値を用意するために

var path = $('#stroke'), // 描画するパスの指定
path_length = 1646, // パスの長さ
frame_rate = 30, // フレームレート
milli_sec_per_frame = Math.ceil( 1000 / frame_rate ), //1フレームあたりのミリ秒
duration = 4000, // アニメーションの継続時間（ミリ秒）
time = 0 ; // 現在の時間

というように、フレームレートに応じた「１フレームあたりにすすめるミリ秒」、「アニメーションの合計時間」と、Easing中の値を取得するためのための「現在の時間」（初期値は0）を設定しています。
【2】jQuery Easingを使った値の取得は、【1】で設定した変数をメソッドの引数に渡して、

var stroke_length = jQuery.easing.easeInOutExpo( //イージングの指定
null , // nullを代入
time , // 現在の時間
path_length , // 初期値
-1 * path_length , // 変化させる値（初期値との差）
duration // アニメーションの合計時間
);

として値を取得します。
【3】『「現在の時間」を変化させる』は、前回は変化の値で処理していたsetIntervalの終了条件の書き換えも含め、

if( time >= duration ){
// パスが描き切られたらsetIntervalを解除
path.attr('stroke-dashoffset', 0 );
clearInterval( stroke_timer );
}else{
// 1フレーム分時間をすすめる
time += milli_sec_per_frame;
}

として、1フレームごとに予め設定した秒数「現在の時間」を進めて、設定した合計時間を超えた段階でインターバルを削除するという処理を行っています。