シェアありがとうございます!

javascriptのイージングアニーメーションをプラグインなしで実装する

 どうも、最近Vue.jsをゴリゴリやっているHashiです。

 さて、javascriptでアニメーション処理したい場合にイージングを実装したいケースって多いと思うのですが、今回はプラグインなしで自前でイージング処理をしたい場合の計算式の紹介をしたいと思います。

今回紹介するイージング種類

 イージングの種類は細かい動きも含めるととても多くなるのですが、今回は基本的なイージング処理である下記の3種類を紹介したいと思います。

イージング種類

  • EaseOut
  • EaseIn
  • EaseInOut

環境構築

 まずは、今回のデモとなる簡単な環境を構築したいと思います。なお、今回はChromeをターゲットブラウザとします。

HTML

 今回は3種類のイージングに加えイージングなしの動きも参考として加えたいので、下記のようにそれぞれのターゲット要素を用意した簡単なhtmlファイルにしました。

 こんな感じでアニメーション表示エリアを作って、その中に各ターゲット要素を配置します。

CSS

 次に上記のコードで読み込んでいる「styles.css」でターゲットを少し装飾します。

 アニメーションエリアを中央表示にして、ターゲット要素を背景黒の20pxの正方形でそれぞれ装飾しています(下の画像参照)。

イージング実装

 さて、上記のように簡単にデモ環境を構築したところで、実際にjavascripでアニメーションとイージングの処理を実装していきます。

 まず先にコードを載せた上でそれぞれ重要となる数式について説明したいと思います。

 上記のコードが今回のデモの完成形になります。

 デモ

 全体の流れを簡単に説明すると、それぞれターゲットとなる要素を取得した上で、requestAnimationFrameを使ってターゲットが横に移動するアニメーション処理をしています。requestAnimationFrameの中で各イージングのアニメーションの処理をしており、最終的に全ての要素が目標の位置まで移動したところでrequestAnimationFrameが止まるように設定しています。

 それでは、各イージング処理の重要な部分を説明していきたいと思います。

Linear

 まずは、一応念のためにイージングがかかっていないアニメーションからみていきます。

 上記がイージングがかかっていない通常の移動アニメーションになります。

 speedという変数にフレームごとに10ずつ加算して、その分ターゲット要素が右に移動していきます。そして、目標値である500を超えた時点でアニメーションがストップするようになっています。これは簡単ですね。

EaseOut(イーズアウト)

 では、イージング処理です。まずは、一番使うケースが多い「EaseOut」から見ていきます。

 EaseOutの動きは最初は加速して、到達点に近づくに連れて徐々に減速していくという動きになります。

 上記がEaseOutアニメーション処理の流れになりますが、大枠の処理はイージングなしのLinearとほぼ同じです。

 このコードの中で一番重要なのが3行目の数式の部分ですね。

 この数式が実際にEaseOutの動きを実現しています。一見少し難しいように思うかもしれませんが、一度法則を覚えてしまうと簡単です。その法則が下記。

 先ほどの数式を書き換えると上記のようになります。この法則で覚えておくととても簡単です。それぞれの環境に合わせて到達点と始点を変えるだけで流用できます。

EaseIn(イーズイン)

 続いて、「EaseIn」を見ていきましょう。

 EaseInの動きは最初は遅く、到達点に近づくに連れて徐々に加速していく動きになります。EaseOutと逆の動きですね。

 上記がEaseInアニメーション処理の流れになります。こちらも大枠はこれまでのコードと同じになります。

 ここで実際にEaseInの動きを実現しているのが3行目の数式になります。

 これはEaseOutと違ってすごく簡単ですね。最初は遅く、徐々に加速していけばいいだけです。これも下記のように覚えておくと便利です。

EaseInOut(イーズインアウト)

 では、最後のイージング「EaseInOut」を見ていきましょう。

 EaseInOutの動きは最初は遅く、その後加速して、到達点に近づくに連れてまた徐々に減速していく動きになります。その名の通りEaseInとEaseOutを合わせた動きになります。

 ここで重要なのは3行目ですね。

 EaseOutとEaseInに比べて少し複雑になっていますが、これも法則として覚えてしまえばいたって簡単です。

 このコードの中でやっていることは、目標地点の中間地点までEaseInの処理をして半分をすぎたらEasseOutの処理をしています。1つのコードでやっていますが中身はif文になります。

 このようにそれぞれ法則として覚えておけばイージングの処理もプラグインを使わずとも簡単に実現できるので覚えておくと役に立つかもしれませんね。

 デモ

 なお、今回は移動アニメーションで実装しましたが、同じ原理でフェード等のアニメーションにも流用できるのでお試しください。

まとめ

 いかがでしたでしょうか?

 今回はjavascriptでプラグインを使わずにイージング処理を実装する方法を紹介させていただきました。一昔前のFlash全盛期の時代にはActionscriptで紹介したようなイージング処理を実装していましたが、様々なイージングプラグインが誕生するに連れ書くことも少なくなりましたが、最近はcanvasだったりThree.jsでコンテンツを作る機会も増え、イージングの処理もまたスクラッチことも増えてきた印象がありますので、ご参考になれば。

 ということで、今回はここまで!Hashiでした。また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活を目指すフリーランスのWEBエンジニア兼デザイナー。大人になってもずっと遊んでいたい人。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です