イージングの公式を使って要素をなめらかに動かす

イージングって何？

開始とか終了地点に近づくにつれて速度が変わるアレのこと。
今更感満載なので詳しくはググってね。

実装

See the Pen Untitled by m1y474 (@m1y474) on CodePen.

const div = document.querySelector("div");
const span = document.querySelector("span");
let left = 0;

move();

function move() {// 求める値 += (目標値 - 現在の値) * 0.02
  left += ((500 - 16) - left) * 0.02; // 目標値に到達した時点でspanが見切れるため横幅の16を減算
  span.style.left = `${left}px`;

  requestAnimationFrame(move);
}

linear（速度変化なし）との比較

See the Pen Untitled by m1y474 (@m1y474) on CodePen.

まとめ

単純に加算していく（linearな動き）より、イージングの公式とやらで実装したほうが動きがなめらかになるらしい。
カーソルの動きに沿って要素を動かしたいときとかインタラクティブなことに使ってあげると良さげ。
UIアニメーションむずい。

株式会社エイルシステムではWebエンジニア・モバイルアプリエンジニアを募集しています。
実務経験がなくてもOKです。ご興味のある方は弊社HPよりご連絡ください。