MD-Blog_Web Creative

Lottie（ロッティー）とは

Airbnbから登場したiOS, Android, React Native対応のアニメーションライブラリです。
After Effectsで作成したアニメーションを簡単にWebで実装できるものです。

メリット

• 簡単に実装できる（ゴリゴリのJavaScriptがわからなくても使える）
• iOS, Android, React Native対応モバイル端末で使用できる
• 軽量なのでスマホでもアニメーションができる

Lottieを使うために必要なもの

Bodymovin

After Effectsで作成したアニメーションをjsonに書き出す時に必要になる拡張プラグイン。

lottie.min.js

上記二つのファイルは

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

よりダウンロードしてください。

Bodymovinの場所

Lottie-web-master/build/extension/bodymovin.zxp

lottie.min.jsの場所

Lottie-web-master/build/extension/player/lottie.min.jp

BodymovinをAfter Effectsで使えるようにするには

bodymovin.zxpを開くためにZXP installerをインストールしなくてはなりません。

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

上記URLよりダウンロードしインストールします。
ZXP installerを開き、bodymovin.zxpをドラック&ドロップすると、After Effectsで使えるようになります。

まず、はじめにAfter Effectsの環境設定にある
「スクリプトによりファイルへの書き込みとネットワークへのアクセスを許可」
にチェックを入れる。
チェックを入れないと空のjsonファイルができます。この設定は重要です。

After Effectsでjsonに書き出す

Illustratorのレイヤーはシェイプレイヤーに変換する必要があります。
Illustratorのレイヤーを選択した状態で
レイヤー→作成→ベクトルデータ からシェイプを作成をクリックします。

ウィンドウ→拡張機能→Bodymovin を選択し、画面より書き出すものをSelected（選択する）してRenderをクリックする。
そして、Doneをクリックするとjsonに書き出しができました。

BodymovinのSettingsをクリックすると下記の画面が出てきます。

設定画面の説明

• Split
  複数のjsonファイルをX秒ごとに分割
• Glyphs
  フォントを図形に変換
• Hidden
  非表示レイヤーをエクスポートする
• Guides
  ガイドされたレイヤーをエクスポートする
• Extra Comps
  エクスプレッションが外部コンポを指している時に選択する
• Original Asset Names
  元のプロジェクト名でアセットをエクスポートする
• Standalone
  アニメーションとプレーヤーを1つのファイルにまとめてエクスポートする
• Demo
  ローカルプレビュー用にHTMLをエクスポートする。
• AVD
  Androids Animated Vector Drawableのxmlを書き出します。

基本的にはGlyphsだけで問題ないと思います。

すべてがjsonで書き出しできるわけではありません。
jsonに変換できないエフェクトがあり、また放射ワイプなどjsonで書き出しができないものがあります。

jsonを確認してみましょう。下記URLにjsonファイルをドラック&ドロップします。

• https://lottiefiles.com/preview

スマホでも確認できるLottieのアプリがあります。

• iOS: https://apps.apple.com/jp/app/lottie-preview/id1231821260
• Android: https://play.google.com/store/apps/details?id=com.airbnb.lottie

Lottieを使用する！

lottie.min.jsを読み込みます。

<script src="lottie.min.js"></script>

基本の設定

let animation = lottie.loadAnimation({
  container: document.getElementById('test'), 
  renderer: 'svg', // 描画形式
  loop: true, // trueにしたらループ。1回再生の場合はfalse
  autoplay: true, // 自動再生
  path: 'data.json' // jsonのパスを指定
});

サンプル

こちらがサンプルです！

まとめ

Lottieを使えば簡単に実装できました。ですが、JSの知識が全くないという人は難しいかもしれません。
すべてがjsonで書き出せるわけではないので、今後サポートしてもらえると、活躍の場が広がると思います。