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

Sass @import → @use
inoue
inoue
TRY

【Sass】@importを@useに置き換えてみる《FLOCSS対応》

Stripe Payment Links
inoue
inoue
TRY

コーディング一切不要のStripe Payment Linksで決済機能を試してみる

AudioVisualizer [ howler.js + SVG ]
inoue
inoue
TRY

howler.jsを使ってオーディオビジュアライザーを作ってみる

nuxt + netlify + WP
inoue
inoue
TRY

Nuxt.js + Netlify + WP REST APIでブログサイトをつくってみる②【OGP設定】

nuxt + netlify + WP
inoue
inoue
TRY

Nuxt.js + Netlify + WP REST APIでブログサイトをつくってみる①

SVGを使った斜めやアーチ状の背景
inoue
inoue
TRY

SVGを使って斜めやアーチ状の背景をつくってみる

NEW POSTS

Flatpickr
inoue
inoue
TIPS

Flatpickrで日時入力をカレンダー表示にする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【実践編】見出しの文言を変更できるようにする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【デザインオプション編】テーマに新しい機能を加える方法

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【準備編】カスタマイズに必要な前提知識について

BASE Partners
inoue
inoue
COLUMN

【BASE Partners】有料テーマの無償提供特典について

BACKGROUND VIDEO
inoue
inoue
TIPS

動画をWebページの背景に埋め込む時のテクニック

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