【jQuery入門】easingの使い方とPluginの活用方法まとめ!マサト2018/7/162018/7/16こんにちは、ライターのマサトです!今回は、jQueryで実現できるアニメーションの動きを変化させることができる「easing」について学習をしましょう!プラグインを導入することで、さらにアニメーションをパワーアップさせることも可能です。Plugin」の使い方などの応用的な使い方に関しても解説していきます。まとめ「easing」とは?それでは、まず最初に「easing」について基本的な知識から学習を進めていきましょう!「easing」を使うと、アニメーションの動きに変化をつけることが可能になります。この「変化」というのは、常に一定の速度でアニメーションするドロップダウンリストがあるとします。「easing」を使うと、例えば最初はゆっくり動いて後半にかけて動きが速くなるようなアニメーションにできるわけです。他にも、遅い動きと速い動きを繰り返したり、バネのようにビヨーンと伸び縮みするものを作ることも可能です。「easing」の使い方この章では、「easing」について基本的な使い方を見ていきましょう!easingの種類や「animate()」を使ったプログラミング手法について学んでいきます!jQueryで利用できるeasingについてまずは、「easing」の種類から見ていきましょう!といっても、実はjQueryの標準で搭載されているeasingは2種類しかありません。・「linear」:常に一定の速度で動く・「swing」:最初と最後だけゆっくりで途中は速めに動く「linear」「swing」は、最初から利用できるので最も基本でありよく使われるアニメーションと言えるでしょう。これらの「easing」は、jQuery.easingというオブジェクトに動きが記述された関数が格納されています。このjQuery.easingオブジェクトに新しい関数を記述することで「動き」を拡張することも可能なわけです。次に、「animate()」を使って実際にeasingをプログラミングしてみましょう!まずはアニメーションさせたい要素を決めます。今回は、以下のh1要素を対象にしてみましょう。<h1>タイトル</h1>このh1要素をeasingの「swing」を使ってアニメーションさせるには次のように記述します。'swing');animate()を使ってCSSの「margin-left」を指定することで、h1要素の左側に200pxのスペースが作られます。これを2秒間かけてアニメーションしながらスペースが作られるのですが、「swing」が指定されていますよね?そのため、アニメーションは一定の速度ではなく「動き」のあるものに変化するわけです。Plugin」についてこの章では、「easing」を拡張できるプラグインについて見ていきましょう!主に、プラグインのダウンロード方法やCDNを活用する手法について学んでいきいます。Plugin」のダウンロード方法まずは、プラグインのダウンロード方法について見ていきましょう。1.3」というのが無料で公開されています。入手先のリンクは以下のとおりです。src="jquery.easing.1.3.js"></script>基本的な導入準備はこれだけなので簡単ですね。標準では2種類しかなかったeasingが、プラグインを導入すると一気に30種類以上に増えるので活用範囲は広いです。Plugin」を使う方法プラグインの導入は、CDNを使った方法もあるので合わせてご紹介しておきます。CDNは、あらかじめ必要なファイルをクラウド上に設置して、URLを記述するだけですぐに利用することができます。そのため、プラグインのJavaScriptファイルをダウンロードする必要がないのでさらに簡単になるわけです。利用できるURLとしては、次のとおりです!http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.jshttps://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.jsどちらも同じ機能を持ったプラグインを導入できます。大きな違いとしては、URLの最初にある「http」「https」が異なっている点でしょう。最近はSSL対応のWebサイトが増えているので、そうしたサイトでは「https」から始まるURLを使わないとエラーになります。Plugin」の使い方この章では、実際にeasingのプラグインを使った手法を見ていきましょう!主に、「animate()」を使ったものや「scrollTop()」を活用したアニメーション方法を学んでいきます。「animate()」を使ってアニメーションさせる方法まずは、「animate()」を使ったプログラミング手法を見ていきましょう!これは、冒頭で解説した標準のeasingを使った方法とまったく同じように利用することが可能です。同じようにh1要素に対してアニメーションを行いたい場合は、次のように記述します。$('h1').animate({"marginLeft":"100px"},2000,"easeOutBounce")animate()の第3引数に注目してください!「easeOutBounce」と記述していますが、これこそがプラグインによって拡張されたeasingなわけです。このように名称を文字列で指定するだけで、バリエーション豊かな動きを実現できるのでとても簡単ですね。画面のスクロールに対してアニメーションを行える特徴があります。これを活用すると、例えば画面トップへアニメーションしながらスクロールして戻ることが実現できます。ボタンをクリックしてアニメーションしながら戻るには、次のように記述します。'easeOutBounce');})この例では、クリックイベント処理内にanimate()を使って「scrollTop」を活用しているのが分かりますね。第1引数に「scrollTop:0」と記述することで、画面の最上部へ戻ることができます。すると、animate()によってアニメーションされるわけですが、指定したeasingの動きをしてくれるわけです。2019年4月3日まとめ今回は、jQueryでアニメーションの動きを豊かにしてくれる「easing」について学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!・jQuery標準で利用できるeasingは「linear」と「swing」しかない・プラグインを導入することで利用できるeasingが30種類以上に増える・CDNを使うことでURLを記述するだけでプラグインをすぐに使える上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。