• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

アニメーションライブラリ「Lottie」を使って、超軽量Webアニメーションを実装する方法

2019年1月4日

  • このエントリーをはてなブックマークに追加

あけましておめでとうございます!
デザイナーの伊東です。

今年もデザイン、フロントエンド、XRのことを中心に少しでもお役立ちできる情報を発信できるよう精進していきます。
2019年もよろしくお願いいたします!

さて、新年一発目の投稿ですが、Webアニメーションについて書こうと思います。
みなさんは、ブラウザ上で動くWebアニメーションを実装する時、どのような方法で実装されていますでしょうか?
CSS、JavascriptやCSV、はたまたmp4形式の動画を直接貼り付けるなどなど、色々とあるかと思います。

今回は、「Lottie」というアニメーションライブラリを使って、簡単に、そして超軽量でWebアニメーションを実装する方法をご紹介します。
こんなアニメーションを実装するところまでを目標にやっていきます。

Lottieを使ったことのない方に向けて、わかりやすく解説していきますので、最後までお見逃しなく!

この記事の目次

  • 1 Lottieとは
  • 2 Lottieの使い方
  • 3 まとめ

Lottieとは

Lottieとは、Airbnbが開発したアニメーションライブラリです。
AdobeのAfter Effectsで作成したアニメーションを、Lottie対応形式(JSONファイル)でレンダリングし、読み込んでWebサイトに表示させることができます。

メリットとして、「実装の簡単さ」と「超軽量」ということが挙げられます。

まず、1つ目の「実装の簡単さ」についてご説明します。
冒頭で挙げたCSS、Javascript、CSVによるアニメーションでは、動きの複雑さに合わせて記述するコードも同様に煩雑になり、実装にかかる工数はかなりのものになっていきます。
Lottieでは、After Effectsで書き出したJSONファイルにアニメーションに関する記述が含まれているので、読み込ませるだけで簡単に実装することができます。

次に、2つ目の「超軽量」という点についてです。
通常のmp4形式やmov形式の動画を貼り付ける場合、そのファイルサイズはかなり大きくなってくるかと思います。
LottieではアニメーションをJSONファイルとして扱うため、ファイルサイズはしっかりと抑えられます。
そうすることで、大きな遅延もなくスムーズにアニメーションを表示することが可能になります。

スクリーンショット 2019-01-03 23.18.10

Lottieの使い方

Lottieのインストール

それでは早速Lottieの実装方法について見ていきましょう。

まずはLottieをダウンロードします。
iOS対応版、Android対応版など様々ありますが、今回使用するのはWeb版のLottieです。
GitHubからソースをダウンロードしてください。
https://github.com/airbnb/lottie-web

その中で、今回使用するのは以下のファイルです。
lottie-web-master/build/player/lottie.min.js

このファイルをあらかじめ読み込ませておいてください。

1
<script src="/js/lottie.min.js" type="text/javascript" charset="utf-8"></script>

アニメーションファイルのダウンロード

次に、読み込ませるアニメーションファイルを用意します。
After Effectsで1からアニメーションを作成し、JSONファイルを生成して読み込ませる、という流れになります。

今回は、JSONファイルをLottieで扱うところをメインにご説明しますので、
すでに公開されているアニメーションファイルをダウンロードしてきたいと思います。

下記のサイトに、Lottie対応のアニメーションファイルがたくさん公開されています。
https://www.lottiefiles.com/

スクリーンショット 2019-01-03 22.09.50

好きなアニメーションファイルを選択すると、アニメーションの詳細ページに遷移します。

スクリーンショット 2019-01-03 23.22.33

右下の”Download”ボタンをクリックしてJSONファイルをダウンロードしてください。
(”Embed Code”の部分のソースコードを貼り付けると、LottieのJSファイルを読み込ませなくてもアニメーションを表示させることができます!)

JSONファイルの読み込み

全ての準備が整いましたので、最後にJSONファイルを読み込ませましょう!

先ほどlottie.min.jsを読み込ませていた部分のすぐ後に、下記のコードを貼り付けます。

1
2
3
4
5
6
const anim = lottie.loadAnimation({
container: document.getElementById('bodymovin-wrapper'),
renderer: 'svg',
loop: true,
path: './happy_new_year_.json'
});

1行ずつご説明します。

“container”には、アニメーションを表示する要素のIDを指定してください。
“renderer”には、アニメーションを出力する形式を指定します。基本的に”svg”で問題ありません。
“loop”には、アニメーションを再生し続けるかを指定します。再生し続ける場合は”true”を指定してください。
“path”には、読み込むJSONファイルへのパスを指定します。

以上で最低限の設定は完了です!

問題なくアニメーションが表示されれば成功です!

まとめ

いかがだったでしょうか。
今回は、LottieでJSONファイルを読み込ませる基本的な部分をご説明しました。

本来は、Webアニメーションの実装には相応の技術と工数が求められていました。
アニメーションさえ用意できれば、実装する際の手間が省け、軽量化にも繋がることを実感していただけたのではないでしょうか。

この記事でLottieに興味を持っていただけたら、After EffectsからのJSONファイル生成にチャレンジしてみてください。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • python-logo-master-v3-TM

    Web制作時に高解像度の元画像がない場合にPythonで高画質化する方法

    25 1月, 2023

  • スクリーンショット 2022-10-01 6.05.06

    Three.jsの負荷軽減のTips

    1 10月, 2022

  • 2b56af4cae58a76b18979a678f6a8a4b_m

    レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

    23 2月, 2018

デザイナー募集
プログラマー募集
  • Next story 仮想環境「Vagrant」をスムーズに別のPCに移管する方法
  • Previous story blender2.8を使って3Dオブジェクトにアニメーションをつける方法〜part.2〜

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.