Help us understand the problem. What is going on with this article?

AfterEffects から Lottie のアニメーション JSON を作成する手順

Lottie_to_JSON_00.png
日頃からアイコンアニメーションばかり作っているわけではないのですけど
新しい環境をセットアップする時だったり、久々に Lottie 実装する時に
いつも何となく忘れて検索してしまうので
自分への備忘録を兼ねて手順を纏めて記事にしました。

❶ まずは素材となるアニメーションを AfterEffects で作成

まずは素材となるアニメーションを AE で作成します。
Lottie_to_JSON_01.gif
Tips メモ
イラレからファイルを持って来た時などは予め「ベクトルレイヤーからシェイプ」を作成を選択してレイヤーをベクター(SVG)化しておきましょう
※これをしておかないと JSON で書き出しが出来なくなるので注意しましょう
方法 >>> レイヤーを右クリック → 作成 → ベクトルレイヤーからシェイプを作成

AE側の設定で必要なのは
環境設定のスクリプトとエクスプレッションメニュー内の
「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」
にチェックを入れておきましょう!
Lottie_to_JSON_02.png

❷ コード書き出しする為の Bodymovin をダウンロードする

Bodymovin
https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html
Lottie_to_JSON_03.png
落としてきたこのファイルを開こうとして、上記のようなZXPを開けないというアラートが出る場合は
アドビアプリケーションのエクステンションとアドオンのインストール
https://helpx.adobe.com/jp/creative-cloud/kb/installingextensionsandaddons.html

あるいは
https://aescripts.com/learn/zxp-installer/
https://zxpinstaller.com/

これらの ZXP Installer をダウンロードしてインストールしてください。
ちなみに私は上の方を使いました。

❸ AE のエクステンション Bodymovin から JSON を書き出す

エクスプレッションから「Bodymovin」を選択します。
Lottie_to_JSON_04.png
プラグインのウィンドウが立ち上がります。
Lottie_to_JSON_05.png
Settings メニューから「Glyphs」が選択されていることを確認。
Lottie_to_JSON_06.png
「Render」ボタン押下したら任意の場所に data.json が書き出されます。
Lottie_to_JSON_07.png
これで実装に必要な JSON ファイルが出来上がりました。
あとは、見た目に問題がないか Lottie 公式サイトのプレビューで見てみるフローです。

❹ Lottie にログインしプレビューページで確認する

生成された data.json を下記のプレビューページで確認することが出来ます。
https://lottiefiles.com/preview

問題なくうまく書き出されていれば、こんな風に確認できます。
Lottie_to_JSON_08.gif
https://lottiefiles.com/share/O4iV4G
↑ 実際の作成ファイルのプレビューです

ちなみに JSON 本体のコードの中身覗くと、こんな風にちょっと怖いんですけど(笑)
Lottie_to_JSON_09.png
コードで動いている SVG なので、大きな解像度のものでもディティールが美しいのと、なんといっても軽量実装が実現出来るのが嬉しいですね!

まとめは以上となります。

アプリにもWebにも使える!
マルチプラットフォームに対応している
Lottieアニメーション
https://lottiefiles.com/

この記事が、これからトライする方など
どこかの誰かのお役に立てたら嬉しいです!
 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした