MENU CLOSE

Lottieを使って
アニメーションを表示させてみる

lottie
lottie

アニメーションライブラリ「 Lottie」

Lottie
lottie

LottieはAirbnbがリリースしたアニメーションライブラリです。
iOS、Android、React Nativeに対応しており、もちろん通常のWebサイトでも使えます

具体的には、Adobe After Effectsで作ったアニメーションを「Bodymovin」を使ってJSONファイルで出力し、そのJSONファイルを読み込むだけで表示させられるライブラリです。
「Bodymovin」はオープンソースライブラリで、After Effectsのエクステンション(拡張プラグイン)としてインストールできます。 もちろん無料で使えます。

今回は「LottieFiles」を使う方法で

僕はAfter Effectsでゴリゴリにアニメーションを作れるレベルではないので、今回はLottieの公式サイトに用意されている「LottieFiles」からすでにできあがっているアニメーションをLottieを使ってサイトに表示させるところまでをやってみます。

LottieFilesのスクリーンキャプチャ
LottieFiles

LottieアニメーションをWebサイトに表示させる

ここからは具体的な方法のメモ。

まず「LottieFiles」から表示させたいアニメーションを選びます。

そこからアニメーションの詳細が表示されるので、スピードや背景などを調整できます。調整したらコードの作成に進むのですが、表示させる方法は2パターンあります。

1. JSで表示させる

まずはlottieライブラリを読み込んでJSで表示させる方法です。
好きなアニメーションを選択し、アニメーションを調整するところまでできたら、JSONをダウンロード、もしくは「Lottie Animation URL」からURLをコピーします。

そして次にhtml。

<div class="block">
  <div id="js-lottie"></div>
  <p>by LottieFiles</p>
</div>
<!-- /.block -->

#js-lottieにlottieアニメーションを表示させます。 LottieFilesはCCライセンスなので作成者を明記しておきます。 ライセンスについての詳細はこちらから。

次にJS。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" crossorigin></script>
<script type="text/javascript">
  const params = {
    //アニメーションを表示する要素を指定
    container : document.querySelector('#js-lottie'),
    //アニメーションの形式。SVG以外は指定することがないと思います
    renderer  : 'svg',
    //アニメーションをループさせるか
    loop      : true,
    //自動再生させるか
    autoplay  : true,
    //Bodymovinで書き出したJSONファイルを指定
    path      : 'https://assets8.lottiefiles.com/packages/lf20_IcSdx9.json'
  };
  const anim = lottie.loadAnimation(params);
</script>

ライブラリを読み込んで、いくつかのパラメータを指定するだけでOKです。これだけで表示されます。

ここではライブラリをCDNで読み込んでいますが、もちろんnpmでもインストール可能です。詳しくは下記の公式Githubをご確認ください。

airbnb/lottie-web

https://github.com/airbnb/lottie-web

2. html埋め込み機能を使う

JSで表示させるのも非常に簡単なのですが、LottieFilesではもっと簡単な埋め込み方法があります。

先ほどと同様に使いたいアニメーションをクリックすると、アニメーションの詳細が表示されます。その時に「Use this animation in」という項目があります。

Use this animation Inの項目キャプチャ

この「html」というボタンをクリックします。すると・・・

LottieFilesの埋め込み機能

なんということでしょう。

めちゃくちゃ簡単な埋め込みコードを生成してくれます。
しかもわかりやすいGUIで。

下のコードをコピーして、貼り付けるだけで先ほどのJSと同じように動きます。

DEMO

JSで表示する方法と公式の埋め込みの両方を試したデモを作りました。

lottieアニメーションのデモ

非常に簡単でした。しかも軽い

さいごに

今回はLottieライブラリを使ったアニメーションの表示方法をメモしました。
実際に制作で使うにはAfter Effectsを使ってモーショングラフィックを作れないとあまり意味はないかもです。笑
ただLottieFilesは見ているだけでもワクワクしますし、AEPファイルがダウンロードできるものもあるので、After Effectsを使えるデザイナーやフロントエンドエンジニアは参考にして作ってみるのも楽しいと思います。
僕も何度かAfter Effectsを触っていますし、モーショングラフィックは興味のある分野なので今後少しずつチャレンジしていくつもりです。

まずは弊社のロゴでも動かしてみようかな。
できたらまたAfter Effects編として記事にします。

記事一覧

RELATED

GA4連携人気記事ランキング機能を自作プラグイン化してみ【WordPress】
inoue
inoueのサムネイル
TRY

【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた

netlify UPDATE BUILD IMAGE [ビルドイメージの更新]
inoue
inoueのサムネイル
TRY

【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]

screendot screenshot API
inoue
inoueのサムネイル
TRY

スクリーンショットのAPI「screendot」を使ってみた

Dart Sass + Gulp
inoue
inoueのサムネイル
TRY

DartSassがなかなか辛かったのでGulpを修正してみた

AudioVisualizer [ howler.js + SVG ]
inoue
inoueのサムネイル
TRY

【howler.js】ストリーミング音源からオーディオビジュアライザーを作る

Simple GA Ranking
inoue
inoueのサムネイル
TRY

Simple GA Ranking[ver2.1.6]が表示されないので調べてみた

NEW POSTS

テキストの無限ループアニメーション【CSS + JS】
inoue
inoueのサムネイル
TIPS

【CSS + JS】テキストの無限ループアニメーション

shopify
inoue
inoueのサムネイル
TIPS

【Shopify】カートへの遷移を飛ばしてチェックアウトに進むボタンを設置する

PhotoSwipe v5
inoue
inoueのサムネイル
TIPS

【JS】PhotoSwipe v5を使って画像をポップアップ表示する

AVIF [ gulpでjpg・pngからAVIF画像を生成 ]
inoue
inoueのサムネイル
TIPS

gulpでjpg・pngからAVIF画像を生成する

MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]
inoue
inoueのサムネイル
TIPS

【JS】MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]

Google Sheets API スプレッドシートのデータをJSONで取得する
inoue
inoueのサムネイル
TIPS

【Google Sheets API】 スプレッドシートのデータをJSONで取得する

ブログ記事一覧
  • HOME
  • TRY
  • Lottieを使ってアニメーションを表示させてみる