copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index logo_evolab

2022/01/28

After Effectsを使用してSVGアニメーションを作る

INDEX

    はじめまして。2021年11月に入社したデザイナーのuemuraです。

    近年、新しいデザインツールが続々と誕生し、デザイナー自身で簡単にアニメーションを作ることが出来るようになり、アニメーションを活かしたUIデザインを多く見かけます。

    そこで今回は、AfterEffectsを使用してちょっとしたSVGアニメーションを作成する方法をご紹介します。

    こちらのチェックアイコンのSVGアニメーションを作成していきます。

    準備するもの

    • Bodymovin(SVGアニメーションをjsonファイルとして書き出すためのAfter Effects拡張機能)
    • Illustratorで作成した素材
    • After Effects

    「Bodymovin」のDL

    After Effectsで作成したSVGアニメーションをjsonで生成するためのAfter Effects拡張機能「Bodymovin」を事前にDLします。

    Bodymovin

    インストール後、

    • After Effectsの「環境設定」選択
    • 「スクリプトとエクスプレッション」選択
    • 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェック

    Illustratorで素材の作成

    こちらのアイコンをIllustratorで作成します。

    • Illustratorで、「✓」「枠」「塗り」の3つのレイヤーに分ける
    • 線のアウトラインのアニメーションを付けるために、「✓」と「枠」の線の位置は中央で作成
    • アウトラインしないでaiで保存

    After Effectsにaiファイルを取り込む

    • 「プロジェクトパネル」に作成したaiデータをドラッグ&ドロップ
    • 読み込みの種類を「コンポジション」、フッテージのサイズ「レイヤーサイズ」で取り込む
    • 取り込んだフォルダの中にあるaiデータを「タイムラインパネル」にドラッグ&ドロップ

    コンポジションが作成されます。

    • メニューバーの「コンポジション」から「コンポジション設定」選択
    • 任意のアイコンのサイズ、デュレーション(アニメーション時間)、背景色を設定します。
    • 「タイムラインパネル」にあるaiデータのレイヤーの上で右クリック
    • 「作成」から「ベクトルレイヤーからシェイプを作成」を選択

    シェイプレイヤーが作成されます。

    これでアニメーション前の準備は完了です。

    アニメーションを作成

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

    • 先程作成した、シェイプレイヤーの「コンテンツ」を展開
    • Illustrator時のレイヤーごとにグループ分けされているので、わかりやすいようにレイヤー名を付ける

    枠線のアニメーション

    • 「枠線」のレイヤーを選択
    • 「コンテンツ」の「追加」から「パスのトリミング」を選択

    「枠線」のレイヤー内に「パスのトリミング」が追加されました。

    • タイムラインのインジゲーターが0秒の位置で、「パスのトリミング」を展開
    • 終了点の「ストップウォッチ」をクリック、終了点を0%に設定
    • タイムラインのインジゲーターを1秒の位置に移動
    • 「パスのトリミング」の終了点の左側にある「◆(キーフレーム)」をクリック、終了点を「100%」に設定

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

    ✓のアニメーション

    • 「✓」のレイヤーを選択
    • 「コンテンツ」の「追加」から「パスのトリミング」を選択

    「✓」のレイヤー内に「パスのトリミング」が追加されました。

    • タイムラインのインジゲーターが1秒の位置で、「パスのトリミング」の終了点の「ストップウォッチ」をクリック
    • 終了点を0%に設定
    • タイムラインのインジゲーターを2秒の位置に移動
    • 「パスのトリミング」の終了点の左側にある「◆(キーフレーム)」をクリック
    • 終了点を100%に設定

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

    塗りのアニメーション

    • タイムラインのインジゲーターを1秒の位置に移動
    • 「塗り」のレイヤー内にある「トランスフォーム」を展開
    • スケールの「ストップウォッチ」をクリック
    • スケールを「0.0,0.0%」に設定
    • タイムラインのインジゲーターを2秒の位置に移動
    • 「トランスフォーム」のスケールの左側にある「◆(キーフレーム)」をクリック
    • スケールを「100.0,100.0%」に設定

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

    トランジションの設定

    作成したアニメーションにトランジションの設定をします。

    • 「枠線」レイヤー内の「パスのトリミング」の終了点を選択
    • 「グラフエディター」を選択、タイムラインパネルに表示
    • グラフエディター内の0秒、1秒の各■(キーフレーム)を選択
    • ハンドルが出てくるので好みの速度に調整

    これを「✓」、「塗り」同じようにトランジションを設定していきます。

    これでトランジションの設定は終了、アニメーションアイコンの完成です。

    書き出し方法

    プレビューして動きに問題なければ書き出しをします。

    • メニューバーの「ウィンドウ」選択
    • 「エクステンション」から「Bodymovin」を選択
    • 「Bodymovin」のウィンドウが開いたら、書き出すコンポジションを選択
    • 右側の…をクリックして保存先の設定
    • 「Render」をクリック、「done」をクリック

    すると保存先に「data.json」が格納されています。

    これで書き出し完了です。

    サイトへの実装

    事前にアニメーションが問題ないか確認するために、アニメーションライブラリ「Lottie」プレビューページを使って確認しましょう。

    (プレビューを使用するにはLottieのアカウント取得が必要です)

    • 保存したjsonファイルをドラッグ&ドロップで確認
    「Lottie」プレビューページ

    正常に動くことを確認したらサイト上で表示させましょう。

    今回は、コードを書くのが苦手な方でもできる「htmlの埋め込み機能」で表示させる方法をご紹介します。

    • 「Lottie」のプレビューページで「Asset Link」のURLをコピー
    Lottie Web-Player
    • Controls:アニメーションコントロールの表示。
    • Autoplay:ロード時にアニメーションを再生。
    • Hover:ホバーでアニメーションを再生。
    • Loop:アニメーションを繰り返すように設定。

    出来たら、「GENERATED CODE」をコピー。

    htmlにを貼り付けたら表示完了です!

    まとめ

    いかがでしょうか。

    まだAfter Effectsになれていない方でも、アイコン程度であれば簡単にアニメーションを作ることができます。

    これまでアニメーションに対して、難しいと感じていた方はこれを機会に挑戦してみませんか。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View