After Effects で作成したUIアニメーション習作
来たるべきデザイナ・エンジニアボーダーレス時代に備えるべく…ってなわけでもありませんが、長らくPhotoshopでアニメーションのプロトタイプを作っていたのを、そろそろAfter Effectsに移行しようかなあと年末に思い始めて早2週間。
小一時間ほどですがさっくり習作を作ったので自分のためにメモメモ。
なぜAEを使おうと思ったか
は単純明快で、Photoshopよりもやれることが多い・扱いが特化している、でもFlashより簡単そう、というイメージからです。
あと、ゆくゆくはXcode上でプロトタイプ作れるようにならんといけんなあという思いがあるので、そのための準備期間的なノリです（今のところの目標は、今年前半にAEをマスターして後半でXcode（のアニメーション部分）をマスターする）。
あと、Psでできないことの1つに「特定のパーツをループさせることができない」があるんですよね。これ、どういった部分が当てはまるかというとローディング画面なんかが該当します。「画面遷移したらここで少し待たされますよー」なんてシチュエーションをクライアントに伝える時に重宝するんですよね。
こんなの作ってみた
成果物はこんなの。
とりあえずやりたかったこととしては「ローディングのインジケータをループさせる」「オブジェクトを追従させる」「イーズインを適用してみる」だったので、ひとまず成功です。
以下、簡単なメモ。自分用なので語句とか割と適当です。
前準備
PSDファイルはD&Dでコンポジションに追加するのが◯。なぜか読み込みから入れたらフレーム数が0.2fだったり延長できなかったり？よくわからないことになってしまった。
D&Dで追加すればコンポジション設定で指定したデュレーションが適用される。
あと個人的に困ったのが、オブジェクトに設定されたストロークは設定が外されるので、線を入れているオブジェクトはレイヤー効果から設定する。加えて、なぜかカラーオーバーレイの効果も外れてしまったので要注意。
ループ
ループはめちゃ簡単だった。こちらの記事を参考に、キーフレーム設定して回転プロパティにエクスプレッション設定すればOK。なんて簡単…！
これに縮小の数値を入れると↑みたいに小さくなりながら消えてくれる。
オブジェクトの追従
追従は変数使ったらうまくいった。
1つ基準の動きを持たせたオブジェクトを作ったら、後は他のオブジェクトのエクスプレッションに
x=this_comp.layer(thisLayer,+1).position.value_at_time(time-0.1);
x+150
を入れれば大丈夫。x+150てのは、横位置にズラして並べるため。
Y方向は前のオブジェクトの位置を参考にするだけだから、特に指定はナシ。
書き方を工夫すれば、基準のオブジェクトを中心に左右に並べることもできると思う。
ホントは「あるオブジェクトの不透明度が100%になったらオブジェクトを移動させる」ていうのも作ってみたかったけど、これはif文とか使うっぽいのでまた今度。
イーズイン
イーズインはグラフエディターから簡単にできた。ただまだグラフの見方が慣れない。
というわけで、Google先生に尋ねつつ小一時間程度でこれくらいのものができました。
アニメーションの幅も広がるし、作るのにこなれたらエンジニアとのコミュニケーションロスも減りそう。最終的には、コードで渡せるくらいになりたいですね（今年後半の目標）。
次はトランジション系を頑張って習得してみようと思います。現状、UIデザインに関連したHow Toがこれくらいしかないので、独学でやっていくしかないかな。
今回作ったサンプルはDropboxに置いたので、興味ある方はどうぞ。
