After Effectsで作るアイコンアニメーション

UIデザイナー 道合

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの16日目の記事です。

近年、新しいUIデザインツールが次々とリリースされ、シンプルな画面遷移やアニメーションならデザイナーでも簡単に作ることができるようになりました。これをきっかけに、動きをデザインすることに興味を持ったデザイナーは多いのではないでしょうか?そんなデザイナーの方々に「After Effectsで作るアイコンアニメーション」を紹介したいと思います。

準備するもの

  • パスのみで作成されたアイコン(.aiファイル)

今回サンプルで用意したアイコンはシンプルなメールアイコンです。こちらをアニメーションさせていきます。

① After Effectsにaiファイルを読み込む

メニューバーの「ファイル」から「読み込み」を選択し、対象のファイルを「コンポジション - レイヤーサイズを維持」で読み込みます。 読み込めたら、プロジェクトエリアのアイコン素材(.ai)を、画面左下にあるタイムラインエリアにドラッグ&ドロップし、新しいコンポジションを作成します。

After Effects画面の説明画像

② アニメーションの時間を設定する

メニューバーの「コンポジション」から「コンポジション設定」を開き、デュレーションを2秒に設定します。

コンポジション設定の説明画像

③ 読みこんだaiファイルをシェイプに変換する

アニメーションさせるレイヤーを選択し、右クリックメニューの「作成」から「ベクトルレイヤーからシェイプを作成」をクリックし、シェイプレイヤーを作成します(最初に読み込んだ.aiファイルのレイヤーは自動的に非表示になります)。

「ベクトルレイヤーからシェイプを作成」の説明画像

新規にできたシェイプレイヤーを選択肢し、コピー&ペーストで複製します。今回は複製元を「bg-icon」複製後のレイヤーを「icon」とします。

レイヤー名の説明画像

準備はここまでです。それではアニメーションさせていきましょう。

④ キーフレームを設定していく

タイムラインが「0(00:00f)」になっていることを確認し、「bg-icon」レイヤー内にある「トランスフォーム」から「不透明度:40%」に設定します。

「不透明度の設定」と「タイムライン」の説明画像

「icon」レイヤー内にある「追加」から「パスのトリミング」を選択します。レイヤー内に「パスのトリミング 1」が追加されるので、下記の手順でアニメーションを設定していきます。

  • タイムラインが0秒(00:00f)になっていることを確認
  • 「パスのトリミング 1」内の「終了点」で「ストップウォッチ」のアイコンをクリックし、キーフレームを打つ
  • 「終了点;0%」に設定
「タイムライン」が0秒(00:00f)の「パスのトリミング」指定説明画像

  • タイムラインを1秒(01:00f)に動かす
  • 「パスのトリミング 1」内の「終了点」でレイヤーの左端のアイコンをクリックし、キーフレームを打つ
  • 「終了点;100%」に設定
「タイムライン」が1秒(01:00f)の「パスのトリミング」指定説明画像

アニメーションの設定は終了です。

⑤ トランジションを設定していく

お好みで線端を円型にしたり、トランジションを設定するとよりリッチなアニメーションにできます。

線端を円形に設定

「icon」レイヤー内の「コンテンツ」から「グループ1、2」の「線」の中にある「線端」を「丸型」に設定します。

「線端」の「丸型」設定の説明画像

トランジションの設定

アニメーション設定した「パスのトリミング1」に対してトランジションを設定していきます。

  • 「icon」レイヤー内の「パスのトリミング1」の「終了点」レイヤーを選択
  • 「グラフエディター」を表示
  • 「00:00f」と「01:00f」のキーフレームをドラッグで選択し、右クリックメニュー内の「キーフレーム補助」から「イージーイーズ」を選択
  • 好みの速度に調整
「トランジション」設定の説明画像

完成!

完成したアニメーションgif画像

Webサイトへの実装

今回作成したアイコンアニメーションは、Airbnbが開発したアニメーションライブラリ「Lottie」を使用すれば、簡単にWebサイトに実装できます。 Lottieは、SVG形式なので解像度を気にする必要がなく、JavaScriptやLottie独自のメソッドで、アニメーションの制御もできます。

実装サンプル

After Effectsに慣れてしまえば、下記のようなアニメーションも簡単に作成・実装できます。

See the Pen icon-animation by michiai-koki (@micchimouse) on CodePen.

注意点

Lottieで実装する際は、After Effectsの表現が一部できないものがあるので、あらかじめ確認しておきましょう。

Supported Features

まとめ

今回はシンプルな線画アニメーションでしたが、実装サンプルにあるように、アイデア次第でさまざまな表現ができます。シンプルなアイコンでも、小さなアニメーションをつけることで、Webサイトのクオリティはぐっと上がるので、挑戦してみてはいかがでしょうか。