Webデザイナー向け/After Effects/Lottie/まとめ

web
Apr 29, 2021

webデザイナーもAfterEffects使いたい/まとめ

AfteEffects + Lottieでアニメーションを制作する、まとめです。
ここで紹介しているものはLottie(Bodeymovin)で書き出し可能なものだけです。

Bodymovinの設定

After Effectsで作ったアニメーションをjsonではきだし、Lottieで実装するために、After Effectsに拡張機能Bodymovinを設定する方法
Bodymovinの設定

After Effectsの設定

After Effectsの新規コンポジションの設定方法です。サイズや再生時間などの構成の設定をします。
After Effectsの設定

After Effectsから書き出す

After Effectsで作ったアニメーションをBodymovinで書き出す方法です。
jsonの書き出し方法

Webページへの実装方法

書き出したアニメーションの実装例です。
実装方法

【AE】Illustrator(ai)の読み込み

AfteEffects + Lottieでは画像データは扱うことができませんが、Illustratorはシェイプレイヤー化することで利用可能です。その手順と注意事項です。
Illustrator(ai)の読み込み

【AE】位置・不透明度

スクロールダウンボタンを例にした、「位置」と「不透明度」の使い方です。
位置・不透明度

【AE】位置・不透明度・スケール

「位置」「透明度」「スケール(大きさ)」を使ったアニメーションの制作例です。
位置・不透明度・スケール

【AE】回転

「回転」を使った制作例です。
回転

【AE】パス

パスに沿ったアニメーションの制作例です。
パス

【AE】文字

「文字(テキスト)」の入れ方です。
文字

#animation

#いったところmemo

#読書きろく