イージングとは
DOTweenのアニメーションに緩急をつけるために使用される設定です。ゲームに合わせて適切なイージングを選択できれば、気分の良いアニメーションになります。
基本のイージング 3 種類（In / Out / InOut）
イージングはアニメーションの開始時(In)、終了時(Out)、開始と終了の両方(InOut)のいずれかで速度を変化させる3種類が基本の形です。
Ease.In
開始時にゆっくりと始まり、徐々に加速。画面内から画面外へ移動する際に適している。
Ease.Out
開始時は速く、徐々に減速して終了。要素が画面外から画面内に入ってくるときに適している。
Ease.InOut
ゆっくり始まり、中間で加速、終了時に減速。画面内の移動に適している。
イージングの実装方法
Tween の末尾に .SetEase() を追加します。指定しない場合は Ease.Linear が適用されます。
transform.DOMove(new Vector3(5, 0, 0), 3).SetEase(Ease.InOutSine);イージングの例
イージングの種類は非常に多いので記事を参照させていただき、便利そうなイージングをこちらに載せてみました。
その他イージングに関して視覚的に分かりやすい記事がありましたので、参考程度に見るといいかもしれません。
https://game-ui.net/?p=835#toc17
Quart
4次関数的な速度変化を持ち、開始・終了での変化が急で中間は比較的一定速度になります。
メリハリが強く、印象的な動きを演出できます。素早い表示や消失に適しています。
以下はスコア表示をして、数字が上に徐々に移動しながら透明になっていく処理を実装したものです。
//DOAnchorPosY＋DOFadeでダメージ処理
//DOAnchorはRectTransformコンポーネント用のメソッド
text.rectTransform.DOAnchorPosY(50, 1.5f).SetEase(Ease.OutQuart);
text.DOFade(0, 1.5f).SetEase(Ease.OutQuart);Back
アニメーションが目標に到達する直前で一度逆方向に引き戻されるような動きをします。
ボタンの反動やオブジェクト登場時の勢いなど、余韻を与えたい演出に適しています。
以下はボタンを押したときにボタンが少しの間拡大されて、元の大きさに戻るときに反動が加わるようにした演出です。
//DOScaleでサイズを変えると文字が化けてしまうのでDOPunchScaleを使用
startButton.transform.DOPunchScale(Vector2.one * 0.4f, 0.3f).SetEase(Ease.OutBack);Cubic
3次関数的な速度変化で、Quad より強め、Quart より穏やかな緩急です。
UI やオブジェクトの登場／退場など、自然な演出に向いています。
以下は X 軸移動の例です（シーケンス使用）。詳細は別記事で扱う予定です。
// 初期位置
transform.position = new Vector3(-15f, 0f, 0f);
// シーケンスで順番実行
Sequence seq = DOTween.Sequence();
seq.Append(transform.DOMoveX(-5f, 1f).SetEase(Ease.OutCubic))
.AppendInterval(interval)
.Append(transform.DOMoveX(5f, 1f).SetEase(Ease.InCubic))
.AppendInterval(interval)
.Append(transform.DOMoveX(15f, 1f).SetEase(Ease.InCubic));Expo
指数関数的な加減速で、急激なスピード変化を演出できます。
瞬間的な登場や消失など、強いインパクトを与えたい場面に適しています。
以下はCubicと同様の処理です。
Bounce
落下後に跳ね返るような、物理的な動きに近いイージングです。
Ease.Outでは、終了時に複数のバウンドを経て徐々に落ち着きます。
オブジェクトの落下、UI要素が画面に飛び出してきて着地する挙動など、コミカルな表現をしたい場合に適しています。
以下はスコアボードをバウンドさせて出現させる処理です。
Bord.rectTransform.anchoredPosition = new Vector2(0, 500);
Bord.rectTransform.DOAnchorPosY(0, 1.5f).SetEase(Ease.OutBounce);まとめ
イージングは DOTween 利用時に欠かせない存在ですが、種類が多く選定に時間がかかることもあります。
事前に自分の世界観に合うものを把握しておくことで、制作がスムーズになると感じました。
参照元
本記事作成にあたり参考にさせていただいたサイトです。DOTween をさらに詳しく知りたい方はぜひご覧ください。
https://zenn.dev/ohbashunsuke/books/20200924-dotween-complete