![[JavaScript] イージング処理の実装と三角関数を使った動きの滑らかさ](https://humanxai.info/images/uploads/javascript-easing-functions-and-trigonometric-movements.webp)
イージング処理とは？
イージング（Easing）とは、アニメーションやゲームでオブジェクトの動きや遷移を滑らかにする手法です。イージングを使うことで、動きが単調にならず、自然でリアルな感じにすることができます。例えば、物体が急に止まるのではなく、徐々に減速するような効果を出すことができます。
イージングにはいくつかの基本的な種類があり、それぞれの使いどころで役立ちます。
1. イージングの基本的なパターン
1. 線形（Linear）:
- 特徴: 速さが一定で、始まりから終わりまで同じ速度で動きます。
- 使いどころ: 特に変化がないシンプルな動き。
function linear(t) {
return t;
}
2. イーズイン（Ease-in）:
- 特徴: 最初は遅く、最後に速くなる加速の動きです。最初はゆっくり、途中で加速する動きになります。
- 使いどころ: 入力を始めたばかりの時に自然な動きを出すとき。
function easeIn(t) {
return t * t;
}
3. イーズアウト（Ease-out）:
- 特徴: 最初は速く、最後に遅くなる減速の動きです。最初は速く動き、途中で減速します。
- 使いどころ: 終わりの動きを柔らかくしたいとき。
function easeOut(t) {
return t * (2 - t);
}
4. イーズイン・イーズアウト（Ease-in-out）:
- 特徴: 最初と最後が遅く、中央が速い動きです。加速と減速が組み合わさっています。
- 使いどころ: 動き全体を柔らかくしたいとき。
function easeInOut(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
2. 三角関数を使ったイージング
三角関数（例えば、サイン波やコサイン波）を使うと、より自然な動きを表現できます。サイン波の性質を利用することで、動きが滑らかで波打つように見えるため、よりエレガントなイージング処理が可能です。
1. サイン波を使ったイージング（Ease-in & Ease-out）:
サイン関数を利用すると、動きが滑らかに加速して、最後に滑らかに減速します。
function easeInOutSine(t) {
return (1 - Math.cos(t * Math.PI)) / 2;
}
- 説明:
Math.cos()は動きの開始と終了で緩やかに変化するため、加速と減速が自然に行われます。
2. コサイン波を使ったイージング（Ease-in & Ease-out）:
コサイン波を使用したイージングも、サイン波と似た効果を持ちますが、微妙な違いがあります。最初に遅く、途中から加速する動きに適しています。
function easeInOutCosine(t) {
return 0.5 * (1 - Math.cos(Math.PI * t));
}
- 説明: こちらもサイン波と同じく、アニメーションの開始時と終了時がスムーズに遷移しますが、わずかな違いで動きに個性を加えることができます。
3. 複数のイージング処理を組み合わせる
複数のイージングを組み合わせて使うことで、より複雑で自然な動きを作り出すことができます。例えば、オブジェクトが一度加速して、途中で減速し、最後に微調整して止まるような動きです。
function combinedEase(t) {
return (Math.sin(t * Math.PI / 2) * (1 - Math.cos(t * Math.PI / 2))) / 2;
}
このように、イージング関数を組み合わせることで、動きの柔らかさや滑らかさを強調できます。
4. 実際のアニメーションにおける適用方法
これらのイージング関数を実際にアニメーションに適用する場合、requestAnimationFrame と組み合わせて滑らかなアニメーションを実現します。以下は、イージングを使った簡単なアニメーションの例です。
let startTime;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const progress = (timestamp - startTime) / 1000; // 時間を秒単位に変換
const x = easeInOutSine(progress); // イージング関数を使用
element.style.transform = `translateX(${x * 500}px)`; // アニメーションの適用
if (progress < 1) {
requestAnimationFrame(animate); // アニメーションを続ける
}
}
requestAnimationFrame(animate); // アニメーション開始
まとめ
- イージング処理を使うことで、アニメーションやゲーム内の動きを自然で滑らかにすることができます。
- サイン波やコサイン波を使ったイージングは、滑らかな加速と減速を実現するために便利です。
- イージング関数は、アニメーションの質を大きく左右します。複数の関数を組み合わせて、個性的な動きを作り出すことが可能です。
これらのイージングパターンをうまく使って、ゲームやアニメーションに滑らかでリアルな動きの表現を加えていくと、より魅力的なユーザー体験が作れると思います！
💬 コメント