Webデザイナー向け/After Effects/Lottie/まとめ
Apr 29, 2021
webデザイナーもAfterEffects使いたい/まとめ
AfteEffects + Lottieでアニメーションを制作する、まとめです。
ここで紹介しているものはLottie(Bodeymovin)で書き出し可能なものだけです。
もくじ
Bodymovinの設定
Lottieの使い方。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】文字
「文字(テキスト)」の入れ方です。
文字