RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

一緒にラクーンのサービスを作りませんか？
採用情報 カジュアル面談

カテゴリ一覧

超簡単！超軽量！LottieでWebアニメーションが捗る

こんにちは！新卒2年目、Paid開発担当の小川です！

今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。
リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？

しかし、Lottieを使えば上記の悩みは全て解決してしまいます！！
本稿ではそんなLottieの紹介と使い方についてご紹介します。

Lottieとは？

Lottieは民泊で有名なAirbnbが開発したアニメーションライブラリです。
Adobe After Effectsで作ったアニメーションを簡単に制御することができます！

さっそく、そんなLottieのメリットを見ていきましょう。

Lottieのメリット

複数プラットフォームで活躍

Webをはじめ、iOSやAndroidのネイティブアプリでも使用できる。

超簡単

デザイナーが作ったアニメーションファイルを読み込ませるだけで簡単にエンジニアが実装できる。
デザイナーとエンジニアの切り分けができる。

超軽量

アニメーションをJSON形式で扱うため、mp4やmov形式の動画と比べて遥かに軽量。
リッチなUXの実装に遅延がほとんどない。

さて、実装するために用意するもの見ていきましょう。

用意するもの

lottie.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" type="text/javascript"></script>

アニメーションファイル(.json)

AdobeのAfter EffectsからBodymovinというプラグインを使用することで簡単に作成できます。
※本稿ではjson形式のアニメーションファイルの作成方法については記載しませんのでご了承ください。

Webサーバー

成果物を配置するWebサーバーをご用意ください。
※本稿では成果物をWebサーバーに配置する前提でお話させていただきます。
また、Webサーバーに配置するのがめんどうだなという方はこちらをご覧ください。

使用するファイル

本稿で使用するファイルはこちらからダウンロードできます。
記事内では一部省略している箇所がありますので、参考にしてみてください！

アニメーションを表示してみよう！

さて、実際にブラウザにアニメーションを表示してみましょう！

今回使用する画像はこちらです。

↑ラクーンホールディングスのロゴです！

これに対するアニメーションファイル(.json)を下記のように用意しました。（※After Effects + Bodymovinでアニメーションファイルをjson形式で出力した結果です）

{
  "v": "5.5.8",
  "fr": 60,
  "ip": 0,
  "op": 300,
  "w": 640,
  "h": 360,
  "nm": "コンポ 1",
  "ddd": 0,
  "assets": [
    {
      "id": "image_0",
      "w": 228,
      "h": 108,
      "u": "images/",
      "p": "logo.png",
      "e": 0
    }
  ],
  "layers": [
    {省略},
    {省略}
  ],
  "markers": []
}

かなり長いファイルになるので一部省略しています。

また、assets内の

"u": "images/",
"p": "logo.png",

はそれぞれファイルのディレクトリとファイル名を表しているので、こちらは自分の環境にて適宜調整が必要です。

それでは、実際に動かす方法を見ていきましょう。

ディレクトリ構成

├── lottie.html
|
├── js
| └─ main.js
|
├── json
| └─ animation.json
|
└── css
  └─ lottie.css

lottie.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lottie</title>
    <link href="css/lottie.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="lottie"></div>
    <script src="js/main.js" type="text/javascript"></script>
</body>
</html>

main.js

var params = {
    // アニメーションを表示したい要素(今回はlottieというidを付けて取得しています。)
    container: document.getElementById('lottie'),
    // アニメーションをsvg形式で出力
    renderer: 'svg',
    // アニメーションをループする
    loop: true,
    // アニメーションを読み込んだら自動で再生する
    autoplay: true,
    // アニメーションファイル(.json)のパス
    path: "json/animation.json"
};

// アニメーションをロード
var anim = lottie.loadAnimation(params);

Lottieのドキュメントはこちら

lottie.css

cssは適当で大丈夫です。

@charset "utf-8";

body{
    background-color:#fff;
    margin: 0px;    
    height: 100%;
    overflow: hidden;
}
#lottie{
    background-color:#fff;
    width: 35%;
    height: 35%;
    display: block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    margin: 0 auto;
    opacity: 1;
}

これでlottie.htmlにブラウザからアクセスしてみると以下のようにアニメーションが表示されます。

JavaScriptでアニメーションを制御しよう！

今回はjQueryを使ってロゴをクリックしたらアニメーションを止めてみます。
lottie.htmlとmain.jsを以下のように変更しましょう！

lottie.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lottie</title>
    <link href="css/lottie.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="lottie"></div>
    <script src="js/main.js" type="text/javascript"></script>
</body>
</html>

7行目でjQueryを読み込んでいます。

main.js

var params = {
    // アニメーションを表示したい要素(今回はlottieというidを付けて取得しています。)
    container: document.getElementById('lottie'),
    // アニメーションをsvg形式で出力
    renderer: 'svg',
    // アニメーションをループする
    loop: true,
    // アニメーションを読み込んだら自動で再生する
    autoplay: true,
    // アニメーションファイル(.json)のパス
    path: "json/animation.json"
};

// アニメーションをロード
var anim = lottie.loadAnimation(params);

// ロゴをクリックしたらアニメーションを止める
$(function(){
    $('#lottie').on('click',function(){
        anim.pause();
    });
});

これで再度lottie.htmlにブラウザからアクセスしてみましょう。

HOLDINGSの文字が表示される前にクリックすることでアニメーションが止まっていることがわかります。
これでアニメーションをJavaScriptで制御することができました！

Webサーバーなしで動作検証する方へ

本稿に記載の内容は、Webサーバーに配置されたファイル（lottie.html）にブラウザからアクセスすることで動作します。
しかし、ブラウザからファイルに直接アクセスするだけでは動作しません。
それはブラウザのセキュリティ制約によってローカルファイルの読み込みがブロックされてしまうためです。
この問題を解決するためにはいくつかの方法があります。

デザイナーとエンジニアの作業を切り分けるというメリットを生かすためにはやはりWebサーバーに置くことを推奨します

まとめ

「Lottie」は学習コストもとても低く、これといったデメリットが見当たらない気がします。
今後どんどんリッチなUXが増えてくると思うのでみなさんも是非試してみてください！

一緒にラクーンのサービスを作りませんか？ 採用情報を詳しく見る

関連記事

運営会社：株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc