【Webデザイナー向け！】After Effects でlikeボタンのアニメーションをつくる方法

みなさんこんにちは！

今回は、After Effects でlikeボタンのアニメーションをつくる方法という事で記事を書いていきたいと思います。

今回はWebなどで見かける、"Like"のハートを押すと赤くなるアニメーションが起こるというもののアニメーション部分を作ろうと思います。

このアニメーションをWeb向けにSVGアニメーションとして書き出す方法についてはこちらをご覧ください！

今回はCC2018のソフトウェアを使って作業をご紹介いたします。
旧バージョンとは一部画面配置や挙動が異なる点がありますのでご注意ください。

では早速制作にかかりましょう！

大まかな手順としては、
1.Illustratorでハートを作る
2.After Effectsでアニメーションを作成する
となります。

まずベクターのハートマークを作ります。

とりあえず500px-500pxのファイルを作成します。色はRGBです。

新しく作ったカンバスに"はーと"と打って"♡"を出してみましょう。
フォントはお好みで大丈夫ですが、私は小塚ゴシックを使いました。フォントサイズは400ptです。

これを、アウトライン化して、複合パスを解除したのち、塗りつぶしをグレー(#A0A0A0)にするとこんな感じになります。

これはハートが押される前の状態になります。
ハートマークを選択して、右クリック>選択範囲を書き出し で背景透過pngとして保存しておきましょう。

そして、赤(#FF0000)にするとこんな感じになります。

これを.aiファイルとして保存してIllusutratorを閉じましょう。

次に、After Effectsでアニメーションを作っていきましょう！

まず、After Effectsを立ち上げます。

立ち上げるとこのような画面になると思いますので、画面中央のウィンドウの"新規プロジェクト..."を選択してください。

そうすると新規プロジェクトが出来上がります。
そうして、画面中央の"新規コンポジション"を選択します。

コンポジションとは時間軸のあるアートボードのようなものです。（Ps / Ai /XD使いならわかるはず！）
そうすると、こんなポップアップが出てくると思います。

変更すべきは
・コンポジション名：この名前がJSONの構文の中に入るのでエラー防止のために半角英数をお勧めします
・幅＆高さ：とりあえず双方500pxとします
・デュレーション：作成するアニメーションの長さです。今回は1秒とします。
　　　　　　　　　フレームレートが29.97ですので今回は30コマのアニメーションになります。
・背景色：ご自身のイメージに合わせて。（これはカンバスのカラーで、書き出すときには反映されません。）
以上です。
設定した後、OKを押すとこのような画面になると思います。

一旦、Control（Command）＋Sで保存をしておきましょう！
最初の保存時にプロジェクトの保存先と名称が指定できます。
プロジェクト名も半角英数にすることをお勧めします。

さて、コンポジションの作成まで終わりました。

まずは前回Illustratorで作ったハートを読み込みます。

画面上のファイルから読み込み＞ファイルで.aiファイルを読み込みます。

読み込みたいファイルを選択して、そのまま「開く」を選択してください。

次に、読み込んだ.aiファイルをコンポジションに読み込んで、シェイプ化します。

読み込んだ.aiファイルをコンポジションにドラッグ&ドロップした後、aiファイルを右クリックから作成＞ベクトルレイヤーからシェイプを作成 を選択してください。
これでAfter Effectsでも編集可能なシェイプになります。
そうして、元のIllustratorのファイルはコンポジションから削除してください。

次は、段々出てきて消えて行く丸を作っていきます。

楕円形ツールに持ち替えて、Shiftキーを押しながら円を描きます。
そうして、画面右側の整列も使いながらハートの中央に配置します。
このあたりはIllustratorやPhotoshopと同じですね！

そのあとはアニメーションをかけていきます。

シェイプレイヤーを開きましょう。
コンテンツ＞線1を開いてみてください。
そのなかに線幅というものがあります。
その横にあるストップウォッチ⏱マークを押すと青くなって、再生バーのところにひし形ができたと思います。
このひし形をキーフレームと言います。キーフレームには設定した数値が記録されています。

さて、今回の円の効果はだんだんシェイプを拡大して行く中で線幅が太くなって消えて行くということで表現しています。
私の場合、

線幅 : 00フレームの時に0.0→11フレームの時に50.0→22フレームの時に0%
スケール : 00フレームの時に0%→22フレームの時には100%

としました。
（フレームとは、動画の1コマの単位です。今回は1秒あたり30フレームで制作しています。）

そして、最後にキーフレームを全部選択して、右クリックからキーフレーム補助＞イージーイーズを選択します。
これによって、キーフレーム間の動きが滑らかになります。
（After Effectsはとりあえずイージーイーズみたいなところがあります。笑）

次は、出てきて消える線を作っていきます。

まず、ペンツールに持ち替えます。
そして、どのレイヤーも選択されていない状態でプログラムウィンドウ上で線をかきます。
そのあとレイヤーを展開します。
「コンテンツ」の右側に「追加」があります。その中のリピーターを選択してください。
そうすると、線が複製されますが、一つのレイヤーで管理ができます。
今回は、

コピー数 : 8.0
位置 : 0.0 0.0
回転 : 0x+45.0°
アンカーポイント : -6.0 0.0

としました。
アンカーポイントは正円になるように調整してみてください。

そのあとは出てきて消えていくようにします。
もう一度「コンテンツ」の右にある「追加」、この中の「パスのトリミング」を選択してください。
そうして、「パスのトリミング」を展開すると、「開始点」と「終了点」の二つがあります。
この開始点は線を出して、終了点は線が消えるようにキーフレームを打っていきます。
再生バーを5フレームのところに合わせて、開始点横にあるストップウォッチ⏱マークを押してみてください。
今回は

開始点 : 05フレームで100％→16フレームで0％

このように設定しました。
終了点も開始点と同じ要領で設定してみてください。

終了点 : 11フレームで100％→22フレームで0％

そして、いつものイージーイーズを適用します。
そうして再生してみるといい感じなってると思います！

スケールや位置を先ほど作った円に合わせてやれば線は完成です！

あとはハートにアニメーションをかけます！

ハートを直接動かしてもいいのですが、不都合が起きることもあるので、今回は"ヌルオブジェクト"を使用します。
ヌルオブジェクトは文字通り何もないので、ただコンポジションの中に配置しても何もおきません。
ですが、そのほかのオブジェクトを紐づけることができます。
これによって、ほかのオブジェクトを間接的に動かしたりすることができるものです。

まず、コンポジションの左側（レイヤー名が書いてある部分）の何もないところを右クリックしてください。
そうして、新規＞ヌルオブジェクトを選択してください。
そうするとヌルオブジェクトができます。
そして、ハートのレイヤーの名前の右側にある渦巻きマーク🌀を掴んでヌルオブジェクトまで引っ張ります。
これでハートのレイヤーとヌルオブジェクトが紐づきました。

そうしましたら、今度はヌルオブジェクトを展開してみてください。
今回はスケールと回転のパラメータを操作しています。

スケール : 00フレームで0％→17フレームで120%→22フレームで100％
回　転 ：00フレームで0.0°→05フレームで+3.0°→10フレームで-3.0°→15フレームで0.0°・・・（繰り返し）

としました。
回転ついては、ハートがプルプルする感じを表現するためにつけています。

あとはハートの位置などを良い感じのところに調整して完成です！

いかがだったでしょうか？
ご不明な点があればコメント欄からお寄せください〜

それでは快適なAfter Effects ライフを！