プログラミングどうも、最近Vue.jsをゴリゴリやっているHashiです。javascriptでアニメーション処理したい場合にイージングを実装したいケースって多いと思うのですが、今回はプラグインなしで自前でイージング処理をしたい場合の計算式の紹介をしたいと思います。まとめ今回紹介するイージング種類イージングの種類は細かい動きも含めるととても多くなるのですが、今回は基本的なイージング処理である下記の3種類を紹介したいと思います。イージング種類EaseOutEaseInEaseInOut環境構築まずは、今回のデモとなる簡単な環境を構築したいと思います。今回はChromeをターゲットブラウザとします。HTML今回は3種類のイージングに加えイージングなしの動きも参考として加えたいので、下記のようにそれぞれのターゲット要素を用意した簡単なhtmlファイルにしました。src="scripts.js"></script></body></html>こんな感じでアニメーション表示エリアを作って、その中に各ターゲット要素を配置します。CSS次に上記のコードで読み込んでいる「styles.css」でターゲットを少し装飾します。20px;}アニメーションエリアを中央表示にして、ターゲット要素を背景黒の20pxの正方形でそれぞれ装飾しています(下の画像参照)。イージング実装さて、上記のように簡単にデモ環境を構築したところで、実際にjavascripでアニメーションとイージングの処理を実装していきます。先にコードを載せた上でそれぞれ重要となる数式について説明したいと思います。);}}}());上記のコードが今回のデモの完成形になります。デモ全体の流れを簡単に説明すると、それぞれターゲットとなる要素を取得した上で、requestAnimationFrameを使ってターゲットが横に移動するアニメーション処理をしています。requestAnimationFrameの中で各イージングのアニメーションの処理をしており、最終的に全ての要素が目標の位置まで移動したところでrequestAnimationFrameが止まるように設定しています。それでは、各イージング処理の重要な部分を説明していきたいと思います。Linearまずは、一応念のためにイージングがかかっていないアニメーションからみていきます。true;}上記がイージングがかかっていない通常の移動アニメーションになります。speedという変数にフレームごとに10ずつ加算して、その分ターゲット要素が右に移動していきます。目標値である500を超えた時点でアニメーションがストップするようになっています。EaseOut(イーズアウト)では、イージング処理です。使うケースが多い「EaseOut」から見ていきます。EaseOutの動きは最初は加速して、到達点に近づくに連れて徐々に減速していくという動きになります。true;}上記がEaseOutアニメーション処理の流れになりますが、大枠の処理はイージングなしのLinearとほぼ同じです。このコードの中で一番重要なのが3行目の数式の部分ですね。この数式が実際にEaseOutの動きを実現しています。難しいように思うかもしれませんが、一度法則を覚えてしまうと簡単です。スピード調整値;先ほどの数式を書き換えると上記のようになります。この法則で覚えておくととても簡単です。それぞれの環境に合わせて到達点と始点を変えるだけで流用できます。EaseIn(イーズイン)続いて、「EaseIn」を見ていきましょう。EaseInの動きは最初は遅く、到達点に近づくに連れて徐々に加速していく動きになります。EaseOutと逆の動きですね。true;}上記がEaseInアニメーション処理の流れになります。こちらも大枠はこれまでのコードと同じになります。ここで実際にEaseInの動きを実現しているのが3行目の数式になります。これはEaseOutと違ってすごく簡単ですね。最初は遅く、徐々に加速していけばいいだけです。これも下記のように覚えておくと便利です。スピード調整値;EaseInOut(イーズインアウト)では、最後のイージング「EaseInOut」を見ていきましょう。EaseInOutの動きは最初は遅く、その後加速して、到達点に近づくに連れてまた徐々に減速していく動きになります。その名の通りEaseInとEaseOutを合わせた動きになります。true;}ここで重要なのは3行目ですね。EaseOutとEaseInに比べて少し複雑になっていますが、これも法則として覚えてしまえばいたって簡単です。スピード調整値;このコードの中でやっていることは、目標地点の中間地点までEaseInの処理をして半分をすぎたらEasseOutの処理をしています。1つのコードでやっていますが中身はif文になります。このようにそれぞれ法則として覚えておけばイージングの処理もプラグインを使わずとも簡単に実現できるので覚えておくと役に立つかもしれませんね。デモなお、今回は移動アニメーションで実装しましたが、同じ原理でフェード等のアニメーションにも流用できるのでお試しください。まとめいかがでしたでしょうか?今回はjavascriptでプラグインを使わずにイージング処理を実装する方法を紹介させていただきました。一昔前のFlash全盛期の時代にはActionscriptで紹介したようなイージング処理を実装していましたが、様々なイージングプラグインが誕生するに連れ書くことも少なくなりましたが、最近はcanvasだったりThree.jsでコンテンツを作る機会も増え、イージングの処理もまたスクラッチことも増えてきた印象がありますので、ご参考になれば。いうことで、今回はここまで!Hashiでした。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。