svg アニメーション(3)— jQuery Easing Pluginの裏技
Tips

2016.12.27

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

こんにちは、フロントエンドエンジニアのやまもとです。
前回 (「svgアニメーション(2)」)に引き続き、jQueryを使ってのアニメーションについて書いて行きたいと思います。
前回の記事ではjavascript(js)のメソッドであるsetInterevalを使った簡単な記述での基本的なアニメーションの方法と、svgの文字の線を描画させる方法をご紹介しました。
今回は、前回のコードを更に発展させ、jQueryを使ったアニメーションではよく用いられる「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でもともと用意されているanimateslideUpといったメソッド以外にも自作のアニメーションメソッドにも
利用することができるということです。
※ 裏技といいつつ配布元の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. 「現在の時間」を変化をさせる

の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 ; // 現在の時間

というように、フレームレートに応じた「1フレームあたりにすすめるミリ秒」、「アニメーションの合計時間」と、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フレームごとに予め設定した秒数「現在の時間」を進めて、設定した合計時間を超えた段階でインターバルを削除するという処理を行っています。

codepenでは、継続時間やフレームレート、イージングの種類などをライブで変更して、変化を確認できるのでぜひ色々いじって楽しんでみて下さいね。

Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

Shun Uchimura
2017.05.12
ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View ALL

Contact