本文へジャンプ

ゴリゴリのJSが書けなくても使える! アニメーションライブラリ「Lottie」を使ってみた。

Posted by MONSTER DIVE

Lottie(ロッティー)とは

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

メリット

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

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

Bodymovin

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

lottie.min.js

上記二つのファイルは

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

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をインストールしなくてはなりません。

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

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

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

After Effectsでjsonに書き出す

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

After Effectsでjsonに書き出す - 1

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

After Effectsでjsonに書き出す - 2

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

After Effectsでjsonに書き出す - 3

設定画面の説明

  • 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ファイルをドラック&ドロップします。

スマホでも確認できる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で書き出せるわけではないので、今後サポートしてもらえると、活躍の場が広がると思います。

Recent Entries
MD EVENT REPORT
What's Hot?