Lottieで簡単WEBアニメーション

Issued on May 29, 2020

Author: natom

この記事ではLottieについて軽く紹介した後、使い方などもご紹介します。

Lottieってなんだ

Lottieという、AirBnB(大手民泊サイト)のアニメーション技術があります。jsonで書き出したものをlottie.js経由でユーザ側でレンダリングを行います。

僕はこういうのはAeとかで基本構想ムービーを作ってYouTubeから流したりゴリゴリCSS書いたりしてたのですが、Lottiは何がいいって、Aeからの直接書き出しに対応しています!!

トップページのこれ↓もLottieを使っているので、GitHubに上げてるjsonファイルを読みだして自動でレンダリングしています。

これを表示するのに要したコードは次のJSコードだけです。

  let lottieObj = lottie.loadAnimation({
    container: document.getElementById('Lottie'), 
    renderer: 'svg',
    loop: false,
    autoplay: true,
    path: 'path_to_top.json'
  });

(注)path_to_top.jsonはjsonファイルへのリンクです。urlでOK。

どうやるん?

① まずはAfterEffectsで適当なアニメーションを作ります。難しかったらLottieで調べたらいっぱいアニメーションが出てくるのでそれのjsonを持ってきてもいいと思います。

今回はシンプルなこういうアニメーションを作りました↓

View post on imgur.com

(中身はテキストとシェイプレイヤー(長方形)のみ。)

※画像は使えないそうです。イラレはシェイプレイヤー化してください。僕の写真はベジェ化したものもあるのでそれを使う時もあります。

② 次にBodymovinプラグインを入れます。

ZXP Installerをインストールします。

そして、プラグインBodymovinをインストールします。ページの真ん中辺にDownloadとありますのでそれを押してダウンロードし、インストールしたZXP Installerを開いてドラッグ&ドロップします。

画面に従ってインストールし、Aeの[ウィンドウ]>[エクステンション]>[Bodymovin]を開きます。

③ 書き出しコンポを選んで設定をいじる

書き出すコンポジション(ここでは「コンポ1」)の横にある⚙Selectedを押します。そしてコンポ名の右にある緑の…を押して書き出し先を選びます。

そして上のRenderを押しま…

せん!!

Aeからプラグインに書き出しを許可していないので、[編集]→[環境設定]→[スクリプトとエクスプレッション]で、スクリプトによるファイルの書き込みとネットワークへのアクセスを許可に✅を入れます。

そしたら、今度こそ

④Renderを押してレンダリングします

したら、選んだフォルダーにdata.jsonなるファイルができているはずです。

あとはこれを任意の場所にアップロードして(Lottie Filesがおすすめ)jsonのリンクを作ったら

サイトのjsに

  let lottieObj = lottie.loadAnimation({
    container: document.getElementById('lottie'), 
    renderer: 'svg',
    loop: false,
    autoplay: true,
    path: 'path_to_data.json' //ここの"path_to_data.json"に取得したリンクを張る
  });

を仕込んで

<div id="lottie"></div>

をhtmlに書いたら完成です!

30秒くらいで一周します

まとめ

この記事ではLottieの使いかたをご紹介しました。どうやらLottieをつかってローディングアニメーションを作ったりもできるみたいです。決済のチェックマークなんかこれを使って実装するとかっこいいですよね。聞くところによると約束のネバーランドもLottieを盛大に使って実装されてるようで。見た感じ「確かに」って思いました。

皆さんもLottieをつかってかっこいいアニメーションを導入しましょう!