この記事でわかること

railsアプリケーションに既存のlottieアニメーションを導入する方法
※本記事ではjson形式のアニメーションファイルの作成方法については記載しておりません。

Lottieとは

Lottieとは、Airbnbが開発したアニメーションライブラリであり、これを利用することで
ウェブサイトやアプリ上でアニメーションの実装が手軽にできます。
※以下はスクショですが、モダンなデザインでぬるぬる動くアニメーションが豊富に用意されています。

実際に使ってみたところ、SVGのアニメーションが爆速で実装でき、
ちょっと難しそうだと思っていたアニメーション導入がかなり身近な手段に感じられました！

実装方法

Lottieでアニメーション表示させるには、以下の2つが必要となります。
・lottie.js
・Lottie JSONファイル

STEP.1　lottie.jsの読み込み

まずはメインとなるJavaScriptプラグインlottie.jsについてです。
ファイルの読み込みは、lottie.min.jsを読み込む、またはLottie CDNを利用します。
※他にも導入方法はありますが、ここでは上記2件をご紹介します。

①lottie.min.js を読み込む場合
こちらから、lottie.min.jsをコピーして、assets/javascripts/配下に新規ファイルlottie.min.jsを追加する。

head内に以下の一文を追加します。

html.erb

<%= javascript_include_tag 'lottie.min' %>

②CDN経由の場合
head内に以下の一文を追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>

STEP.2　Lottie JSONファイルの読み込み

Lottieで導入したいアニメーションのJSONファイルをダウンロードします。

ダウンロードしたファイルをassets配下にディレクトリを作って配置します。
※publicフォルダに直置きしてもファイル読み込みはできますが、アセットコンパイル時に
　他のファイルと衝突する可能性を恐れたので、今回はassets配下に置きました。

app/assets/json/xxx.json

{
  "v": "5.5.10",
  "fr": 30,
  "ip": 0,
  "op": 40,
  "w": 140,
  "h": 140,
  "nm": "合成 1",
  "ddd": 0,

また、配置したLottie Jsonファイルの読み込みを行うために
以下の一文を追加します。

app/assets/config/manifest.js

//= link_tree ../images
//中略

// 新しく追記する
//= link_tree ../json

STEP.3 HTMLファイルへの追記

導入したいHTMLファイルに以下の記述を追加する。
シンプルにid指定でアニメーションを出力しています。

<!-- idでlottieを表示させるscriptを制御 -->
<div class="obj-three-point-lottie" id="lottie"></div>

//中略//

<script>
  let animation = bodymovin.loadAnimation({
      container: $('#lottie').get(0), // ID指定
      path: "<%= asset_path('xxx.json') %>", // JSONファイルへのパス
      renderer: 'svg', // ファイル形式
      loop: true, // ループするかどうか
      autoplay: true, // 自動再生
  })
</script>

.get(0)は、jQueryオブジェクトからエレメントを取得しています。要するに、JavaScriptのdocument.getElementById('lottie')と同じことをjQuery風に書いている
と考えて頂ければと思います。

asset_pathについてはこちらをご参照ください。
以上で簡単にLottieを導入することができます。

備考

表示の仕組みとしては、以下のように高速で表示するファイルを切り替える、いわゆる紙芝居のようにアニメーションを実現してます。

そのため、所定のファイルを読み込んだ時、LottieJSONファイルも読み込まれて
動画が再生されるため、diaplay: none;で動画を非表示にしても裏で
ファイルの高速読み込みが動いています。
複数のアニメーションを読み込む状況になると重くなりそうな予感がしました。

そこで、以下のように自動再生を予めOFFに設定しておいて、
任意のタイミングでアニメーションを動かす方が良いかもしれません。

<script>
 let animation = bodymovin.loadAnimation({
        container: $('#lottie').get(0), // ID指定
        path: "<%= asset_path('xxx.json') %>",
        renderer: 'svg', // ファイル形式
        loop: true, // ループするかどうか
        autoplay: false, // 自動再生しない
    })

    $(function () {
        // 任意のタイミングでアニメーションスタート
        $('.js-lottie-start').on('click', function () {
            animation.play();
// 略

lottie-webに書かれている通り、Lottieにはアニメーションの
・再生
・停止
・停止＆非表示
・再生速度変更
etc
など様々なオプションが設けられています。
必要に応じてオプションを選択できるのも非常に使いやすいですね。

最後に

ここまで見ていただき、ありがとうございました。
みなさんもLottieをぜひ導入してみてください(^ ^)。