本文へジャンプ

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

Posted by Mizue Yokouchi

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?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。