小さなアウトプット #004

※こちらはFLAPPERで掲載した記事とほぼ同じ内容となっています。

note用に軽く書いていたら、これで一記事書けるかもと思ってFLAPPERにも投稿しました。

こんな感じに動く図形。

今回は、回転に注目して見ていきたいと思います。

とりあえず、見ただけでこうやっているのかなってイメージ沸きますでしょうか。

1.動きを作って、2.複製して並べて、3.回転を加えるという工程です。

こうしたモーションは最初から最後までをひとつの動きとして捉えてしまうと作るのがとても大変です。

複雑に見える動きも、実は単純な動きの組み合わせでできているということが多くあります。

できるだけ単純化された動きになるよう細かく分けていきます。

まずは上下に動くだけのモーションを作ります。

これを90度ずつずらして配置するとこんな動きになります。

最後に回転を加えて出来上がり。

この最後に回転を加えるというのがポイントで、普通のモーションをさらに動きのあるものに見せてくれます。

これを応用して、普段のモーションにちょっと組み込んでみます。

このモーションに回転を加えます。

めっちゃ地味なんですけど、ちょっとしたアクセントになります。

こうしたモーションでは、どのオブジェクトがグループかを見極めます。四角形のラインと「28 OCT WED」が一緒に回転していることから、これらのオブジェクトはひと塊だなとわかります。

反対に「MOTION」は回転していないので、まったく無関係の別オブジェクトというのがわかります。

別の例。

こちらはよく見ると「MOTION」も一緒に回転しているのがわかります。ということは、こちらはすべてのオブジェクトがひと塊で回転しているということになります。

個人的には回転を使いこなせるようになると画面の動きが大きく見えるように感じます。

最後にここで紹介したモーションのaupです。

※UndoFishさんのイージング(トラックバー版)、文字輪郭追跡、93さんのDelayMoveの3つのスクリプトが必要になります。

→flapper_note_foundation_004.aup