Elastic (エラスティック)
別名 Elastic Ease, Elastic Out
引っ張ったゴムを放したときのように、振幅を小さくしながら目標位置の前後で何度か振動します。オーバーシュートより揺れの回数が多くなります。
使いどころ
遊び心のあるポップイン、ゴムのようなボタン
プロンプト
[シーン] を使いたいシーンに、[長さ] をかけたい時間に置き換えて、AIエージェントに貼り付けてください。プロンプトには技法の名前が入っているので、次からは名前だけで依頼できます。
モーショングラフィックス動画で使います。[シーン]の動きにエラスティック(Elastic)のイージングをかけてください。エラスティックイーズ(elastic ease)、エラスティックアウト(elastic out)とも呼ばれ、オブジェクトが目標位置へ一気に飛びつき、引っ張ったゴムを放したときのように、振れ幅を小さくしながらその前後で揺れます。
目標位置を何度か行き来するようにしてください。オーバーシュートは一度しか行き過ぎず、バウンスは一度も行き過ぎません。
動きと揺れを[長さ]に収め、終わるまでに揺れが完全に収まるようにしてください。似ているモーション
B
Overshoot (オーバーシュート)
別名 Back Ease, Back Out, Ease Out Back
オブジェクトが目標位置をわずかに行き過ぎてから戻ります。床に当たることなく、一度行き過ぎて収まる点がバウンスと違います。
使いどころ
タイトル、カード、アイコンのポップイン
モーショングラフィックス動画で使います。[シーン]の動きをオーバーシュート(Overshoot)で終えてください。バックイーズ(back ease)、バックアウト(back out)とも呼ばれ、オブジェクトが目標位置をわずかに行き過ぎてから戻り、そこに収まります。
目標位置を行き過ぎるのは一度だけにし、そのあとは揺らさないでください。バウンスは目標位置に当たって、行き過ぎることなく跳ね返り、エラスティックのイーズは何度も行き過ぎます。
動きを[長さ]に収め、行き過ぎは小さく抑えて、ミスではなく勢いとして見えるようにしてください。B
Bounce (バウンス)
別名 Bounce Ease, Bounce Out
オブジェクトが床に当たるボールのように目標位置にぶつかり、だんだん小さく跳ね返って止まります。接触のたびにぴたりと止まる点がエラスティックと違います。
使いどころ
落下する要素、遊び心のあるリビール
モーショングラフィックス動画で使います。[シーン]の動きをバウンス(Bounce)で終えてください。バウンスイーズ(bounce ease)、バウンスアウト(bounce out)とも呼ばれ、オブジェクトが床に当たるボールのように目標位置にぶつかり、跳ね返りがだんだん小さくなって止まります。
目標位置を突き抜けることは決してないようにしてください。接触のたびにぴたりと止まり、そのまま跳ね返ります。目標位置の両側へ振れるエラスティックのイーズとは、そこが違います。
動きと跳ね返りを[長さ]に収め、一回ごとの跳ねを、前の跳ねよりはっきり小さくしてください。B
Spring (スプリング)
別名 Spring Animation, Damped Spring, Physics-based Ease
物理シミュレーションによるモーションで、目標位置を行き過ぎ、その前後で振動してから止まります。挙動は固定のカーブではなく、剛性、減衰、質量で決まります。
使いどころ
インタラクティブなUI、ドラッグを離したときの動き、動画のタイトル
モーショングラフィックス動画で使います。[シーン]の動きをスプリング(Spring)で制御してください。スプリングアニメーション(spring animation)、ダンプドスプリング(damped spring)とも呼ばれ、シミュレーションしたばねがオブジェクトを目標位置へ引っ張るので、静止状態から加速し、目標位置を行き過ぎ、その前後で振れてから止まります。
モーションは固定のカーブではなく、剛性、減衰、質量から生まれるようにしてください。振れを増やすなら減衰を下げ、オーバーシュートなしで収めるなら、そうなるまで減衰を上げてください。
[長さ]以内に止まるようにし、すべての要素で同じスプリング設定を使って、同じ素材でできているように感じさせてください。Timing & Principlesのほかのモーション
B
現実の動きを、リアルな表現よりも極端な大きさやタイミングにまで押し広げます。リアルなバージョンと比べたときの、強さの違いとしてだけ見えてきます。
使いどころ
カートゥーン調の、遊び心のあるモーション
モーショングラフィックス動画で使います。[シーン]に誇張(Exaggeration)をつけてアニメーションさせてください。実際に起こるとおりの動きをもとに、より大きな予備動作、より長い伸び、より強い止まりというように、さらに押し広げます。
別のアクションにするのではなく、同じアクションの強さを上げたものです。軌道と出来事の順序は保ち、それぞれがどこまで、どれだけ鋭く動くかを大きくしてください。
全体を[長さ]に収め、オブジェクトが何だかわからなくなる一歩手前で止めてください。壊れて見えるのではなく、カートゥーン調で遊び心のある感じにします。B
Follow Through and Overlapping Action (フォロースルーとオーバーラップ)
別名 Follow Through, Overlapping Action, Drag, Lag
ゆるくつながったパーツは、本体が止まったあとも動き続け、本体が動き出したあとは遅れてついていくため、すべてのパーツが同時に動いて同時に止まることはありません。
使いどころ
髪、しっぽ、動くものに引きずられるパーツ
モーショングラフィックス動画で使います。[シーン]をフォロースルーとオーバーラップ(Follow Through and Overlapping Action)でアニメーションさせてください。ドラッグ(drag)、ラグ(lag)とも呼ばれ、ゆるくつながったパーツは、本体が動き出すと遅れてついていき、本体が止まったあとも動き続け、行き過ぎてから収まります。
パーツがすべて同時に動いて同時に止まることのないようにしてください。パーツは受け身で、本体に引っ張られて動きます。メインの動きと並行して起こる、独立した小さな仕草であるセカンダリーアクションとは、そこが違います。
動きと収まるまでを[長さ]に収め、長いパーツや軽いパーツほど大きく遅らせ、止まるまでの時間も長くしてください。B
Line Boil (ラインボイル)
別名 Boil, Boiling Lines, Wiggly Lines
輪郭線が毎回描き直されたかのようにフレームごとにわずかに震え、形が止まっていても、生き生きとした手作りのルックになります。
使いどころ
手描き風のスタイル、ゆらゆら動くテキスト、スケッチ風の輪郭線
モーショングラフィックス動画で使います。[シーン]の輪郭線にラインボイル(Line Boil)をつけてください。ボイリングライン(boiling lines)、ウィグリーライン(wiggly lines)とも呼ばれ、すべての線を数フレームごとに少しずつ違えて描き直すので、形そのものが止まっていても、線はその場で震えます。
手でトレースした絵をパラパラめくるように、低いフレームレートで、小さく不連続に変化するようにしてください。なめらかに流れると液体のように見えますし、形全体を動かしてしまうとウィグルになります。
[長さ]のあいだ続け、震えは形が読み取りやすいままでいられる程度に小さく抑えてください。