Lottie で ReactNative や Web にアニメーションを追加する

正確には、アニメーションを追加する準備。
AfterEffects のプラグインの設定が面倒なのと、設定してたことを忘れて同じことを2度やったのでメモ。

プラグインファイルのダウンロード

いろいろ書いてあるけど、Githubのレポジトリからダウンロードすれば良い。
https://github.com/airbnb/lottie-web

Screen_Shot_2019-04-30_at_14.03.47

ZIPを解答して、このファイルを探します。
見つかったら、このフォルダを開いたままに。

Screen_Shot_2019-04-30_at_14.03.06

ZXP Installer

プラグインをインストールするには ZXP Installer というものがいるらしいです。
これをせずに After Effects のプラグインフォルダに bodymovin.zxp を入れても動かないので注意しましょう。

こちらからダウンロード。
https://aescripts.com/learn/zxp-installer/

起動するとこんな画面が出てくるので、ここに先程の bodymovin.zxp をドラッグ&ドロップすればOK。自動でインストールが始まります。

Screen_Shot_2019-04-30_at_14.07.04

After Effects

AEを再起動して Window > Extensions > Bodymovin メニューを選択。
この画面が開けばOKです。真っ黒な画面のままであれば何かおかしい。
Screen_Shot_2019-04-30_at_14.10.00

あとは公式にある通り、コンポジションを作ると、勝手にリストに出てくるので、それを書き出せば json なり js なりでファイルを生成することができます。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた