反動をつけて動きに違いをつくる

2019年4月24日

今回は、普段の移動にイージングを使って反動をつけてみたいと思います。

イージングで反動をつける

上の青い四角形が直線移動、下の赤い四角形が反動ありの移動です。
直線移動に比べて動きが大きく見えませんか。

反動をつけるには、UndoFishさんのイージングスクリプト(トラックバー版)が便利です。

34番のグラフでは移動時に逆方向へ反動をつけてから動きます。
35番では反対に、停止ポイントを過ぎてから戻ってくる動きになります。
36番は出だしを34番のように、終わりを35番のように動きます。

先ほどの例に挙げた赤い四角形は36番のイージングを使っています。

イージングの39番

イージングの39番です。
トントントンといった感じで、弾力がある動きを出せます。

拡大縮小の反動

サイズや拡大率で大きくするときには35番を、縮小するときには36番のようなグラフを使用します。

同じパラメータで登場と退場の移動方法が異なるときには、オブジェクトを分割してしまうのが簡明です。

反動を使った例

オブジェクトやテキストの登場に。
座標の移動にイージングの39番。

手描きの文字の登場に。
拡大率にイージング35番。

テキストモーションに。
座標や拡大率、回転などのパラメータにイージングの35番や39番の組み合わせ。

グラフを自分で作る

UndoFishさんのイージング(トラックバー版)は番号を指定するだけでグラフを適用してくれます。

もし自分で細かくグラフをいじりたいのであれば、93さんのマルチベジェ軌道がおすすめです。

いかがだったでしょうか。
揺り戻しのようなちょっとした動きがモーションに差をつけます。
反動をつけた動き、是非試してみてください。