webサイトやアプリで情報などを送信した後に表示するページに、以下のようなアニメーションをつけてみます。情報を紙飛行機に見立ててが左から右に飛んで行った後にチェックマークが出てくるアニメーションです。
このアニメーションをAfter Effectsで制作し、実装にはLottieというアニメーションライブラリを利用します。
Lottieとは
LottieはiOS・Android・React Nativeに対応したアニメーション用のライブラリで、After Effectsで作成したアニメーションをjson形式で読込、ブラウザ上に表示することができます。
Lottieはbodymovinと呼ばれるAfter Effects拡張機能からJSONファイルとしてエクスポートされたアニメーションデータを使用し、webアニメーションを作成する際に大量のコードを書く必要がないため、アニメーションの実装をエンジニアが行っている場合には、その工程をデザイナーが行うことができるので工数が削減できます。
また、JSON形式で扱うためmp4やmov、GIFに比べると軽く、サイトの負担軽減にも繋げられます。
cssやJsでは難しかったアニメーションもLottieを使えば、かなりお手軽に作成できます。
公式サイトにはたくさんのサンプルを見ることができるので、参考にしてください。
【注意点】
After Effectsでの以下のような表現はLottieでは書き出すことができません。
・3Dレイヤー
・エフェクト
・プラグイン
・エクスプレッション
・トラッキング
・レイヤースタイル
・タイムリマップ
このように制限はありますが、シンプルなアニメーションを実装するのであれば便利なライブラリです。公式サイトにはたくさんのサンプルが掲載されているので、自作する際の参考にどうぞ。
【制作の流れ】
① After Effectsでアニメーションを作成する（今回はここまで）
② After Effectsのプラグイン「bodymovin」で、アニメーションをJSONファイルで書き出す
③ LottieとJSONファイルをサーバーにアップロードする
④ HTMLとJavaScriptのコードを記述する
1）紙飛行機のアニメーションを作成する
1-1.）新規でレイヤーを作成しペンツールを使って紙飛行機の絵を描きます。
1-2.）作った紙飛行機を任意の曲線に沿って動かすためペンツールで軌道を描きます。
1-3.）描いた曲線にパスのトリミングでアニメーションを追加
①レイヤーを選択して、パスのトリミングでアニメーションを追加
パスのトリミングの下の開始点のタイムラインで開始地点に0％、終了地点に100％を設定すると、左下から右上に移動するアニメーションが作成されます。
②パスのレイヤーを選択した状態で、ウインドウ > Create Nulls From Pathsを選択して、パスを選択した状態で【パスをトレース】をクリックするとヌルレイヤーがが自動で作られます。
※必ずパスのレイヤー選択してからでないとヌルが生成されないので注意
すると1-3.）で作った曲線に沿った動きをするヌルレイヤーが作成されます。
④ヌルレイヤーと紙飛行機のレイヤーを親子付けする
紙飛行機のレイヤーの「親とリンク」欄にあるピックウィップ（渦巻きマーク）をドラッグして③で生成されたヌルレイヤーに持ってくると、紙飛行機がヌルレイヤーの子として位置付けられます。
紙飛行機がヌルレイヤーと同じ動きをするようになります。
④紙飛行機の位置と向きの調整
ただしこの時点では飛行機の向きが進行方向に向いていないので、アニメーションに合わせて向きを変えないといけません。
レイヤー＞トランスフォーム＞自動方向
するとこの紙飛行機が軌道の角度にあわせて向きを調整します。
2） チェックマークのアニメーションを作る
紙飛行機が消えた後のチェックマークのアニメーションを作ります。
①新規レイヤーでオレンジ色の円を作成しscaleのアニメーションを設定します。
②タイムラインの開始時にscale：0％→115％→100％というアニメーションを作成します。
③円の中にペンツールで白いチェックマークを描き、1-3）と同様に「パスのトリミング」を追加します。
④開始0%→終了100%に設定すると左から右にチェックマークが描画されるアニメーションをできます。
⑤円のscaleが100％になるタイミングで、チェックマークのアニメーションが始まるように設定します。
⑥紙飛行機が消えた後に、このチェックマークのアニメーションが動くようにタイムラインで調整します。
これで紙飛行機とチェックマークのアニメーションが完成しました。
次回はLottieでsvgアニメーションにする方法を紹介します。