UIデザインの制作をmennmiさんに作ってもらい、今回はUIアニメーションについての記事を書いていきます。
UIアニメーションを作るときに考えていることややり方などを簡単に紹介します。
まずは動きのイメージを作り、その後にパーツ分割をしています。
今回は最初に2Dの動きを作った後に3Dのアニメーションをつけていきます。
psdのデータ整理
まずはAEで配置してレイヤーを操作しやすいようにPSDを整理していきます。
フォルダも使用せずにレイヤーのみの状態でAE編集用データとしてPSDを作っていきます。
この時、名前もわかりやすいように変更しておくと良いでしょう。
AfterEffectsのデータ整理
AEの方にPSDを読み込ませ、Grupicoでグループ分けをして編集しやすくします。
分け方としては、ヘッダー、フッター、マインボタン、BGといったように大まかな構成で分けていきます。
2Dの動きをつけていく
動きのイメージは右から左にリストがINしてくるアニメーションになります。
それをまずは簡単につけ、ここからアニメーションを盛っていきます。
3D化を行う
3D化した時に、立体感を感じられるように、まずは斜めから入り、2Dイラストになるように角度を調整します。
ヘッダーとフッターよりも見せたいコンテンツを手前に表示し、立体感を強めつつコンテンツを強調します。
斜めから入ってXの角度を少し上下に振って立体感を強めつつ、CLAIMマークもつけてログボの受け取りを強調します。
さらに冒頭のカード群はY軸に回転させてカードが回転しつつ移動させることで移動時の平坦さをなくしていきます。
ここではチケットが獲得後に暗くなっていたので、モニターのようなイメージのチケットにし、SFっぽさを強調していきます。
さらに獲得した時の印象を強めるために少し全体を奥に配置した状態にし、獲得と同時に手前に拡大してインパクトを強めます。
ちょっとしたことですが、アニメーションをつけていく時にここにこういうモチーフを入れたいとか、動かす中で欲しい要素を考え、少しだけデザインを調整することもよくあります。
今回は、本日受け取るチケットの明るさは他のカードより目立つようにしたいため、他のカードの明るさを少しだけ下げ、床を敷き、被写界深度も入れてさらに奥行き感を作るなどの調整を行なっています。
AfterEffectsで作るのはVコンのため、提案ベースで進めていき、Unityでの制作時に再度詰めていくことになります。
おまけ
立体的に配置した後にカメラをぐりぐり動かすのは楽しいですよね。
ここまで読んでくださり、ありがとうございました。