jQueryのアニメーションに変化をつける「easing」を拡張するプラグイン「jquery.easing.js」の使い方をメモ。
swing/linear
まずはjquery.easing.jsを使わない場合を確認してみます。
jQueryではswingとlinearの2種類のイージングがデフォルトで用意されています。
HTML
<div class="section"> <p>swing</p> <div id="box01" class="box"></div> </div> <div class="section"> <p>linear</p> <div id="box02" class="box"></div> </div>
CSS
.section { position: relative; width: 600px; } .box { position: absolute; top: 25px; left: 0; width: 30px; height: 30px; background: #999; }
JavaScript
$(function() { $(document).on('click', '#start', function() { easingTest($('#box01'), 'swing'); easingTest($('#box02'), 'linear'); }); }); // easingテスト用の関数 function easingTest(element, easing) { element.animate({ left: 570 }, 1000, easing).delay(100).animate({ left: 0 }, 1000, easing); }
animate()などでeasingを設定しなかった場合の初期値がswingで、linearは一定速度でのアニメーションになります。
swing/linearのデモページ
easeIn/easeOut/easeInOut
jquery.easing.jsで拡張されるeasingは大きく分けて3種類あり、easeIn○○やeaseOut○○など、先頭に付く文字列によって変化のタイミングが変わります。
easeIn○○ | 序盤は遅く、終盤に速くなります。 |
---|---|
easeOut○○ | 序盤は速く、終盤に遅くなります。 |
easeInOut○○ | 序盤遅くから徐々に速くなり、終盤徐々に遅くなります。 |
HTML
<div class="section"> <p>easeInQuad</p> <div id="box01" class="box"></div> </div> <div class="section"> <p>easeOutQuad</p> <div id="box02" class="box"></div> </div> <div class="section"> <p>easeInOutQuad</p> <div id="box03" class="box"></div> </div>
JavaScript
$(function() { $(document).on('click', '#start', function() { easingTest($('#box01'), 'easeInQuad'); easingTest($('#box02'), 'easeOutQuad'); easingTest($('#box03'), 'easeInOutQuad'); }); }); // easingテスト用の関数 function easingTest(element, easing) { element.animate({ left: 570 }, 1000, easing).delay(100).animate({ left: 0 }, 1000, easing); }
easeIn/easeOut/easeInOutのデモページ
Quad/Cubic/Quart/Quint
Quad/Cubic/Quart/Quintは動きは似ていますが、Quad < Cubic < Quart < Quint の順で変化の度合いが大きくなります。
HTML
<div class="section"> <p>easeOutQuad</p> <div id="box01" class="box"></div> </div> <div class="section"> <p>easeOutCubic</p> <div id="box02" class="box"></div> </div> <div class="section"> <p>easeOutQuart</p> <div id="box03" class="box"></div> </div> <div class="section"> <p>easeOutQuint</p> <div id="box04" class="box"></div> </div>
JavaScript
$(function() { $(document).on('click', '#start', function() { easingTest($('#box01'), 'easeOutQuad'); easingTest($('#box02'), 'easeOutCubic'); easingTest($('#box03'), 'easeOutQuart'); easingTest($('#box04'), 'easeOutQuint'); }); }); // easingテスト用の関数 function easingTest(element, easing) { element.animate({ left: 570 }, 1000, easing).delay(100).animate({ left: 0 }, 1000, easing); }
Sine/Expo/Circ
Sine/Expo/Circに関しては動きを説明しにくいので、デモページをご確認ください。
HTML
<div class="section"> <p>easeOutSine</p> <div id="box01" class="box"></div> </div> <div class="section"> <p>easeOutExpo</p> <div id="box02" class="box"></div> </div> <div class="section"> <p>easeOutCirc</p> <div id="box03" class="box"></div> </div>
JavaScript
$(function() { $(document).on('click', '#start', function() { easingTest($('#box01'), 'easeOutSine'); easingTest($('#box02'), 'easeOutExpo'); easingTest($('#box03'), 'easeOutCirc'); }); }); // easingテスト用の関数 function easingTest(element, easing) { element.animate({ left: 570 }, 1000, easing).delay(100).animate({ left: 0 }, 1000, easing); }
Back/Elastic/Bounce
Back/Elastic/Bounceは少し特殊な動きで、終点を少し通り過ぎてから戻ったり、バウンドっぽい動きをすることができます。
HTML
<div class="section"> <p>easeOutBack</p> <div id="box01" class="box"></div> </div> <div class="section"> <p>easeOutElastic</p> <div id="box02" class="box"></div> </div> <div class="section"> <p>easeOutBounce</p> <div id="box03" class="box"></div> </div>
JavaScript
$(function() { $(document).on('click', '#start', function() { easingTest($('#box01'), 'easeOutBack'); easingTest($('#box02'), 'easeOutElastic'); easingTest($('#box03'), 'easeOutBounce'); }); }); // easingテスト用の関数 function easingTest(element, easing) { element.animate({ left: 570 }, 1000, easing).delay(100).animate({ left: 0 }, 1000, easing); }
easingを個別でなく比較して見たかったので、動き比較用のデモページを作成しました。
よければ参考にしてください。
【参考サイト】
- これだけは抑えておきたい! jQuery や CSS の「イージング」の基礎知識 | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
- jQuery Easing – jQuery 日本語リファレンス
コメントが承認されるまで時間がかかります。