イージングを使ったテキストモーション

seguimi

今回はイージングスクリプトを使ったテキストの動きを紹介します。

イージングスクリプトの導入はUndoFish さんのページからどうぞ→こちら

*2017.02.10追記 
導入に際し補足説明の記事を書いたので、そちらも参考にしてみてください。

イージングスクリプト001
導入が済むと、アニメーション効果にイージングが追加されているので
テキストにイージングをかけます。
全部で8個ありますが、今回はイージングXを中心に紹介します。

 イージングスクリプト002
イージングXではX移動の動きを設定できます。

開始Xでテキストが動き始める位置を決め、終了Xで止まる位置を決めます。
今回は画面の外から出てくるようにしました。

イージングスクリプト003
また、イージングはテキストオブジェクトの長さだけかかります。
動きの後にテキストを留めておくには、静止したテキストオブジェクトを置いてください。
終了Xが0の場合、コピペしてアニメーション効果のチェックをはずすだけでいいと思います。

イージングスクリプト004
そして、タイプによって動きを決めるのですが、全部で41種類あります。
イージングスクリプトに付属のpngファイルがあるので、画像を見ながら動きを確認してみてください。
30以降が面白い動きをすると思います。

 イージングスクリプト005
文字毎に個別オブジェクトにチェックを入れ、
設定からインターバル(ミリ秒)を設定すると上記のような動きも可能です。

■設定■
 タイプ→27
 開始X→画面の外に出るまで
 終了X→0
 インターバル(ミリ秒)→40
 テキストオブジェクトの長さ→1秒

 
タイプ35(左)、タイプ39(右)

このようにテキストにイージングをかけるだけで簡単にテキストモーションが作れます。
今まで一文字ずつ動かしていたので、これがあるとものすごく助かります。

---------------------------------------------------------------------------------------------


同様にイージングYではY移動について動きを決められます。

■設定■
 タイプ→31
 開始Y→画面の外にでるまで
 終了Y→0
 インターバル(ミリ秒)→40
 テキストオブジェクトの長さ→1.5秒(36フレーム)

---------------------------------------------------------------------------------------------


イージングZではZ移動を。

■設定■
 タイプ→35
 開始Z→小さくなるまで
 終了Z→0
 インターバル(ミリ秒)→40
 テキストオブジェクトの長さ→1秒

いかがだったでしょうか。
残りのイージングRXからイージング透明度までは、次回紹介したいと思います。
イージングスクリプトを使ったテキストモーション、是非試してみてください。

イージングを使ったテキストモーション-2

センスは知識からはじまる
配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]
デザイン入門教室 確かな力を身に付けられる ~学び、考え、作る授業~

Comments 0

There are no comments yet.

Leave a reply