LOADING

AfterEffectsでつくるUIアニメーションその1 – ScaleとEasing

2016-12-26 | AfterEffects

以前こちらの記事でAfterEffectsを使って作ったアニメーションを、アプリ用に書き出すまでの方法を書きました。

デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法

今回はUIアニメーションを作るためのAfterEffectsの使い方を、簡単なアニメーションを作りながら解説していきたいと思います。今回作成するのは簡単な拡大縮小のアニメーションです。

新規コンポジションを作成する

今回は80pxから100pxに拡大したあと80pxにふたたび戻るアニメーションを作ります。コンポジションのサイズは円が最も大きいときの100 x 100にします。

AfterEffectsのウィンドウ – 各ウィンドウと機能

コンポジションを作成したら下の画像のような画面になったと思います。AfterEffectsは主に4つウィンドウから構成されています。さらっとどこで何をするのか見ていきましょう。

0. ツールバー

選択中のツールによって、やれることが変わってきます。このあたりはphotoshopやsketchと似ているので問題ないと思います。

1. プロジェクトウィンドウ

ここは、アニメーションに使う素材をおいておく素材置場です。アニメーションに必要な素材をこちらにまずドラッグしてくることで、素材をアニメーション内で使うことができるようになります。

2. メインパネル

ここは、アニメーションに使う素材をおいておく素材置場です。アニメーションに必要な素材をこちらにまずドラッグしてくることで、素材をアニメーション内で使うことができるようになります。

3. その他ウィンドウ

整列パネルや、プレビューパネルなどがあったりします。個人的にはあまり使いません。

4. タイムライン&レンダーキューウィンドウ

レイヤーにアニメーションを加えたり、レイヤーのスタイルなんかも編集するのがこのウィンドウです。タブでが後ろ側にあるレンダーキューウィンドウに切り替えることもできます。レンダーキューウィンドウでは動画出力の設定を行います。

新規レイヤーを作成する

今回はプロジェクトウィンドウに画像ファイルを持ってくる必要はありません。代わりに円形のレイヤーを作成しましょう。ツールバーの図形ツールを選択肢ます。

デフォルトでは長方形ツールになっているので、長押しで図形ツールのオプションを出して楕円形ツールを選択しましょう。

ツールバーのアイコンが楕円に変わりました。この状態で、メインパネルにドラッグで円を書くことも出来ますが、それだとアニメーションさせるのに非常に都合が悪いです(アンカーポイントが図形の中心からずれてしまうため)。図形をメインパネル中央に表示させるには、ツールバーの楕円アイコンをダブルクリックしましょう。

メインパネルいっぱいの円が中央に表示されました。

タイムラインウィンドウにシェイプレイヤー1というファイルが追加されていることも確認しておいて下さい。

レイヤーの大きさを編集

作成したレイヤーはメインパネルいっぱいに表示されています。つまり、縦横が100pxになっている状態です。これを80pxに変更します。タイムラインウィンドウを見ていきましょう。シェイプレイヤー1というファイル名の左にある三角マーク▶を押してこのようにオプションを展開しましょう。

展開すると、コンテンツとトランスフォームというオプションが出現します。このトランスフォームの中のスケールを100から80に変更しましょう。

レイヤーの色を変更

今度はコンテンツ > 楕円形 1 > 塗り > カラーを編集します。カラーの右側にある長方形をクリックするとカラーウィンドウが現れます。今回は#4990E2に設定しました。

タイムラインを編集

タイムラインを編集して、先程の円形に動きをつけていきます。先程編集したトランスフォーム>スケールの左にあるストップウォッチアイコンをクリックしましょう。ストップウォッチアイコンが青く点灯し、タイムラインにダイヤモンドのかたちが現れたと思います。

次に時間インジケーターと呼ばれるバーを20fのところに移動させて、スケールを100に変更してみましょう。ここまで出来たらスペースキーを押してアニメーションを再生させてみて下さい。先程の一連の作業で、0秒のときにスケール80から20f秒のときにスケール100にするというアニメーションを設定していたんですね。

ここまで来るとなんとなくあらゆるエフェクトの付け方も想像がついたのではないでしょうか?スケールの他にも位置、回転、不透明度など、さまざまなスタイルを動かすことができるので試してみて下さい。

一度大きくした円を最後にもとに戻さなければいけないので、26f秒のところに時間インジケーターを持っていき、スケールを80に戻します。再度スペースを押して動作を確認して下さい。一度大きく膨らんでもとに戻る円のアニメーションの完成です。

イージング(加減速)を編集

ただ、このままだとあまり気持ちのいいアニメーションとはいえませんね。そこで編集するのがイージングとよばれる加速、減速を司る関数です。jQueryやcssアニメーションに馴染みのある方だと聞いたことがあると思います。

楕円レイヤーのスケールを選択した状態で、グラフアイコンをクリックしましょう。先程はダイヤモンドがポツポツ置いてあるタイムラインが表示されていましたが、折れ線グラフのようなものに切り替わりました。こちらもグラフのx軸やy軸などはあまり気にせずにどこをいじればどうなるのかだけを説明するので、あとはひたすら自分で触りまくって慣れてください。

折れ線グラフの点の部分をクリックすると、黄色くハイライトされます。黄色くハイライトされている状態でイージーイーズアイコンをクリックします。

すると、グラフの点からハンドルが生えてきました。このハンドルを伸ばしたり、角度を変えることによって、イージングを編集することが出来ます。いろいろ試して、気持ちがいいアニメーションを作ってみましょう。

なお、”気持ちいいアニメーションってなに?見当もつかない”という方はこちらのMaterial design guidelines – Googleを参考にしてみて下さい。車の発進と停車に代表されるように、地球上では万物はゆっくりと加速してゆき、ゆっくりと停まりますね。Material design guidelinesでは、UIアニメーションもそういった現実世界のモノに近づけることによって”自然さ”を実現しようとしています。

まとめ

今回はAfterEffectsの基本的な操作方法を、簡単な実例を交えて説明しました。今後はアニメーションのコピーの方法、ファイル管理の方法、複数のコンポーネントを持つ複雑なアニメーション作成の方法など、なかなか調べても出てこない部分を解説していきたいと思います。

共有よろしくおねがいします!