今回は、93さんのBezier移動を使ったオブジェクトの移動を試してみたので紹介したいと思います。
Bezier移動(93さんのXプロフィール欄のurlからDropboxへ)
オブジェクトの移動
オブジェクトを曲線で移動させる場合、中間点を打ち、移動方法に補間移動を選択して動かすというのが一つの方法だと思います。
描く曲線によっては中間点をたくさん打たなければならなかったり、ちょっと滑らかさに欠けることも。
そんな時にBezier移動を試してみると良いと思います。
オブジェクトにBezier移動
動かしたいオブジェクトを出します。
そこへBezier移動をかけます。
設定
Bezier移動をかけるとアンカーが出てきます。
丸い点が始点と終点、四角い点が制御点になります。このアンカーを動かしてオブジェクトの軌道を作っていきます。
Cubicは0で3点での制御に、1で4点での制御になります。
中間点を打つ毎にアンカーが増えていきます。
また、中間点の数はCubic 0は10個まで、Cubic 1は7個まで打つことができます。
Bezier移動をかけて拡大率を扱う場合は、オブジェクトの拡大率ではなく、Bezier移動のscaleで調節すると上手くいきます。
オブジェクト自体の大きさはサイズやリサイズで調節すると良いと思います。
回転も同様にBezier移動のrotateを使うと全体を回すことができます。
Viewは0から3まで4種類あります。
View0ではガイドが非表示になります。ガイドも一緒に出力されるので、実際に動画を作って出力する際はViewを0にすることになると思います。
View1は現在選択されている区間のみガイドを表示します。
View2は始点、終点、制御点、軌道すべてのガイドが表示されます。
View3は始点、終点、軌道が表示され、制御点が非表示になります。
パラメータ設定では上の欄がアンカーの座標になります。
使ってみる
一通り設定を見終わったので、実際に使ってみます。
オブジェクトにBezier移動をかけます。
アンカーを動かして上の画像のようなカーブを描いてみました。綺麗に整形したい場合はメモ帳などにアンカーの座標をコピペして編集するのが良いです。
こんな感じで、オブジェクトがBezier曲線で描いたカーブに沿って移動します。
Bezier移動でのオブジェクト移動は自動なので、中間点を打って停止区間を作ることができません。
移動の前後にオブジェクトを停止させたい場合は、別途座標を出したり、オブジェクトを分割して停止位置に配置します。
パラメータ設定のアンカーの座標から、最初と最後のXY座標と同じにするとズレません。
または、モーションはSceneで作って再生位置や再生速度を駆使するなどの工夫が必要になります。
ここがちょっと大変ですね。
Bezier移動の加減速にチェックを入れると、移動に緩急が付きます。
思った緩急と違った場合は、時間制御を利用すると良いかもしれません。位置の移動にイージングを指定します。
通常、時間制御は下にあるレイヤーすべてが対象なので、対象レイヤー数で時間制御の対象を限定しておくと良いですね。
時間制御を使うときは加減速のチェックは外しておきます。
イージングで移動に緩急を付けたもの。
応用
Bezier移動を上手く扱うためにはベジェ曲線をいかにきれいに描くか、滑らかに繋ぐかが一つのポイントだと思います。
コツとしては、S字カーブを描く際、制御点の距離と角度を180度反対側に点対称になるように配置すると繋ぎがスムーズになるかと思います。
移動の速さは中間点の距離によるので、移動距離が短い区間は中間点の間を狭く、移動距離が長い区間は中間点の間も広く取って調節します。
後はいろんな曲線を見て制御点の位置を覚え、この曲線はこういう配置になるんだなというのを積み上げていくと良いですね。
いろんな曲線。
マウスカーソルの動きなど、ほんのり曲線を描くものからぐるっとひと回しするようなものまで滑らかに移動させることができます。
いかがだったでしょうか。
Bezier移動はちょっと扱いが難しいかもしれませんが、曲線を描いてのオブジェクト移動にぴったりだと思います。
機会があれば是非試してみてください。