この記事は Unity アセット真夏のアドベントカレンダー 2020 Summer! 4日目の記事です。
以前、DOTweenのイージング一覧の記事を書きました。
DOTweenというのはUnityで使えるアセットで、様々なものをスクリプトを書いてアニメーション化させられる非常に便利なアセットです。
個人的にはUniRxと並んで最も必要なアセットのひとつ。
上記記事では自分なりに一番詳しく&分かりやすく書いたつもりですが、なんせDOTweenには30種類以上のイージングの種類があるので、「じゃあ結局どれ使えばいいの？」ということになりがち。
ということで、今回はDOTweenにおけるイージングを体系的に選ぶ際のポイントにフォーカスして説明したいと思います。
覚え方や使い方まで触れてしまって長くなったので、もし結論だけ知りたい場合は最後の「イージングの選び方ポイントまとめ」まで飛んでください。
そのあともし興味を持ったら再びここから読んでもらえると嬉しいです。
イージングのタイミング
イージングのタイミング（こう呼ぶこととします）とは、「Ease.〇〇Quad」の「○○」にあたる部分です。
最初を緩やかにするか、最後を緩やかにするかなどを指定する部分。
イージングのタイミング3種類
イージングのタイミングには一般的に、
- ease-in
- ease-out
- ease-inout
の3種類があります。
DOTweenで言うと「Ease.In○○○」「Ease.Out○○○」「Ease.InOut○○○」。
「ease」は「緩和する」「緩やかに動く」といった意味があります。
それを踏まえると、DOTweenのイージングのタイミングはこのようにまとめられます。
| Ease.In○○○ | 最初が緩やか |
|---|---|
| Ease.Out○○○ | 最後が緩やか |
| Ease.InOut○○○ | 最初と最後が緩やか |
イージングのタイミングの選び方
イージングのタイミングの選び方についてですが、押さえるべきポイントはたったひとつ。
それは、「ユーザー操作後のアニメーションは原則ease-outを使う」ということ。
ease-outの使い方ポイント
先ほども説明したように、ease-outは最初が早く最後が緩やかなイージングです。
一方でease-inやease-outは緩やかに始まります。
ユーザー操作後のアニメーションをease-inやease-outで行ってしまうと、ユーザー操作に対するフィードバックが遅れてしまい、操作感を損なってしまうのです。
そのため、基本的にはユーザー操作の直後に行うアニメーションはease-outで行います。
ease-outは現実の物理挙動にも沿ったイージングで、例えば何か物を押した時、最初が速く徐々にゆっくりになって最終的に止まりますよね。
UIなどのアニメーションもこの現実の物理挙動に沿ったアニメーションにすることで、「自分が操作している」という自己帰属感を高める（≒操作性が良いと感じさせる）ことができます。
ease-in / ease-inoutの使い方ポイント
じゃあease-inやease-inoutはどういうときに使えばいいのか。
これはユーザー操作なしでアニメーションが開始する場合に向いています。
ease-outの欠点として「最初が速いので突然アニメーションが始まってびっくりする」というのがあります。
これはユーザー操作の後であれば、ユーザーは何かが起きることを想定しているので準備ができているわけですが、突然ease-outで何かが出てきたりするとびっくりするのです。
そのため、ease-inやease-inoutはユーザーの操作なく突然アニメーションを始める場合に使います。
例えば以下のような場合に使われることが多いです。
- タイマーが止まって終了ダイアログを表示するとき
- ゲームオーバーの演出
- クリア演出
「ユーザー操作以外の何らかのタイミングで表示するとき」が多いですね。
ease-inとease-inoutの使い分けについては、より強調したいときはease-in、穏やかに表示したいときはease-inoutという感じでしょうか。
ただし、後述する緩急の強い関数でのease-inは変化の終了が分かりにくいので、ease-inは緩急の穏やかな関数で利用するのが良いと思います。
イージング関数
次に、イージング関数についての話です。
イージング関数とはDOTweenの「Ease.In○○○」とかの「○○○」にあたる部分で、イージングの変化の仕方（性格）を示すものです。
イージング関数12種類
DOTweenでは12種類のイージング関数が用意されています。
- Linear
- Sine
- Quad
- Cubic
- Quart
- Quint
- Expo
- Circ
- Elastic
- Back
- Bounce
- Flash
こちらは12種類もあって覚えるのが大変なのですが、体系的に覚えられるようにまとめました。
イージング関数の選び方
イージング関数は大きく分けると「緩急の激しさを表すもの」と「振動の種類を表すもの」の2つに分類できます。
緩急の激しさを表す8種類
緩急の激しさを表すのは以下の8つです。
- Linear
- Sine
- Quad
- Cubic
- Quart
- Quint
- Expo
- Circ
このうち、まずは Linear / Quad / Cubic / Quart / Quint について見てみます。
これらは一次関数〜五次関数のことで、○次が増えるほど緩急が激しくなります。
覚えやすいように（Unity使いにとっては）馴染みのある単語も書いておきました。
つまり、デフォルトのイージング関数である Quad よりも緩急を付けたい場合には Cubic / Quart / Quint を指定すればよく、逆に全く緩急を付けたくない（一定変化させたい）場合には Linear を使えば良いのです。
これらに Sine / Expo / Circ も加えるとこんな感じになります。
Sineは三角関数なのですが、Quadよりも穏やかに緩急を付けたい場合に使うことができます。
Sineは他にも波やバネの動きなど、物理的/数学的に三角関数を使うべき場合にも使います。
Expoは指数関数で、Quint（五次関数）よりもさらに激しい緩急になります。
Quintより上はかなり緩急が激しいため、使い所は少ないかもしれません。
Circは円形関数と勝手に名付けました。
楕円の4分の1を描くように変化する変わった関数で、これまでの関数とは少し特徴が異なります。
中盤は割と穏やかめな緩急なのですが、ある時点で瞬間的に変化するのでExpoよりも一番右に配置しました。
振動の種類を表す4種類
振動の種類を表すのは、この4種類です。
- Back
- Bounce
- Elastic
- Flash
Backは最初または最後に行きすぎるような関数です。
これは結構使いやすく、ポップな強調表示をするときなんかに使えます。
Bounceはその名の通り、バウンドするような動きをします。
こちらも強調表示なんかに使えますが、少しやり過ぎ感もあるので個人的にはBackぐらいがちょうど良いと思っています。
次にElasticですが、こちらはゴムの振動のような動きをします。
Elasticは「弾性」という意味。
こちらも強調表示に使えますが、緩急がかなり激しいのと収まりが分かりにくいのであまり使う機会はなさそうです。
最後にFlashですが、これはいわゆる一般的な振動。
In / Out / InOut で方向を切り替える際の滑らかさが指定できます。
また、DOTweenでは振動回数の指定や減衰の有無を指定することもできます。
詳しくはこちら。
振動のイージング関数をまとめるとこのようになります。
| Back | 1回だけ振動 |
|---|---|
| Bounce | バウンドするように振動 |
| Elastic | ゴムのように振動 |
| Flash | 何回でも振動 |
イージングの選び方ポイントまとめ
長々と書いてしまいましたが、イージングの選び方ポイントをまとめます。
まずイージングのタイミングについて、「緩やかなのはどの時点か」を選びます。
この選び方は「ユーザー操作後のアニメーションか」「突然のアニメーションか」などを考慮すると良いです。
そして、イージング関数は「緩急の激しさ（強さ）を表すもの」「振動の種類を表すもの」に分類することができます。
デフォルトのイージング関数であるQuadの緩急よりも激しくしたい場合にはCubic〜Expo（、Circ）、穏やかにしたい場合にはSine、緩急をつけたくない場合にはLinearを選びます。
また、一方向に変化するのではなく振動させたい場合には、目的の動きによって Back / Bounce / Elastic / Flash の中から選びます。
これであなたもDOTweenのイージングマスター！
コメント