Lottieを始めてみる

Lottieを始めるための準備

この記事はAdobe After EffectsからLottieアニメーション作成手順です。

ハードルが高い！と思う方は次の記事でAdobe After Effectsが使えなくてもアニメーションが作成できる方法をお伝えしますので、そちらを参考にしてみてください。（Lottie, After Effects不要の記事）


準備

  1. ZXPInstallerをダウンロード→インストール
  2. 拡張機能「Bodymovin」をダウンロード→インストール
  3. After Effectsでアニメーションを準備
  4. 作成したアニメーションをBodymovinで書き出し（.jsonファイル）
  5. Lottie Filesで書き出した.jsonファイルを確認
  1. 1. ZXPInstallerをダウンロード→インストール

Adobe After Effectsの拡張機能「Bodymovin」プラグインをインストールする為にZXPInstallerをダウンロードし、インストールします。

ZXPInstallerは以下のサイトからダウンロードできます。

https://aescripts.com/learn/zxp-installer/

ZXP Installer
  1. 2. 拡張機能「Bodymovin」をダウンロード→インストール

Lottieの書き出しに必要な拡張機能「Bodymovin」ダウンロード

https://github.com/airbnb/lottie-web


ダウンロードした「Bodymovin」をインストールする為に、１.でインストールしたXZPInstallerを開いて、2.でダウンロードしたBodymovin.zxpファイルをドラッグ＆ドロップします。

これで「Bodymovin」のインストールは完了です！


  1. 3. Adobe After Effectsでアニメーションを作成

Adobe After Effectsの使用方法は割愛しますが、「環境設定」→「スクリプトとエクスプレッション」の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れるのを忘れないでください。

今回はこれを作ってみました。


今回はこれを作ってみました。

4. 書き出したファイルを確認 アニメーションをBodymovinで書き出し（.jsonファイル）

Lotie Files


  1. 5. Lottie Filesで書き出した.jsonファイルを確認

書き出した.jsonファイルをドラッグ&ドロップで作成したアニメーションを確認することができます。

Lottie Files にサインアップ（無料）しておけば、無料でアニメーションのダウンロードができたり、Adobe After Effectsを使わなくても、簡単なアニメーションを作成することができます！（次回の記事はAfter Effectsを使用しないやり方をアップします！）

https://lottiefiles.com/

4.で作成した.jsonファイルをここにドラッグ&ドロップするだけです。

リンクが形成されますので簡単に共有することもできますし、Lottieではスマートフォン用にプレビューアプリも用意されていますので、インストールしておくのもお薦めです。

またここからGIFに変換することもできますし、簡単にLottie Filesから背景に色をつけたり、簡易的ですがアニメーションのエフェクトを変更することも可能です！