Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴と使い方など

Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。

そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。

今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。

Lottieとは

LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非常におすすめのライブラリです。

GoogleやUber、Walgreensなど世界の有名企業も自社アプリケーションにLottieを採用しており、注目を集めています。

Lottieで表示するアニメーションは、Adobeの「After Effects」を使って作成し、「Bodymovin」というプラグインを使ってアニメーションファイルを出力します。

アニメーションの作成からエクスポートまではこの記事では省略しますが、下記の動画で分かりやすく紹介されているので気になる方は参考にしてみてください。

Lottieを使うメリット

実装コストが低い

Lottieを使えば、ちょっとしたコードだけで簡単にアニメーションを表示することができます。CSSやJavaScriptを使って複雑なアニメーションを作ることも可能ですが、ある程度のスキルが必要となり、実装コストも増えてしまうので読み込むだけのLottieはより手軽に、アニメーションを表示することができます。

デザイナーとコーダーが分業体制で作業を行っているのであれば、アニメーション作成に関してほとんどの作業をデザイナー側で済ませることができるので、余計な修正作業や確認作業を減らせるというメリットもあります。

複数プラットフォームに対応

Lottieは、WebはもちろんiOSやAndroidのネイティブアプリでもアニメーションを表示することができ、React NativeやFlutterなど、人気のフレームワークでもLottieを使用することができます。

一度作ったアニメーションは異なるプラットフォームで使い回すことができるので、それぞれで同様のユーザー体験を提供することが可能であることも魅力の1つですね。

動画ファイルよりも圧倒的に軽量

Lottieでアニメーションを表示することによって、動画ファイルを使用する場合よりもはるかにファイルサイズを小さくすることができます。

もちろん、ものによってはLottieで出力することができませんが、UIのアニメーションであれば基本的にLottieを使って表示することができるのではないでしょうか。

Webはローディング時間が長くなると離脱率が上昇してしまうため、より軽量なファイルでAfter Effectsで作成したアニメーションを再生できることは魅力的なポイントです。

Webサイト上でLottieを使用する方法

では、ここからはWebサイト上でLottieを使ってアニメーションを表示する方法をご紹介していきたいと思います。

用意するもの

Lottieでアニメーションを表示するために必要なものは、大きく分けて2つあります。

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

それぞれ詳しくご説明していきます。

lottie.js

こちらはLottieのメインとなるJavaScriptのファイルです。ファイルの読み込み方法はいくつかありますが、下記のGithubリポジトリからダウンロードするか、CDN経由で読み込む方法が簡単です。

Githubからダウンロードする際は、lottie.jsかlottie.min.jsのいずれかを選んでください。

アニメーションファイル

アニメーションのファイルはAfter Effectsで「Bodymovin」というプラグインを使い、JSON形式のファイルをエクスポートして用意します。

基本的にエクスポートしたデータを使用することになると思いますが、試しにLottieを使ってみたいという場合は、「LottieFiles」というサイト上でアニメーションのサンプルをダウンロードすることも可能です。

種類も豊富なので、アニメーションのアイデア探しにも使えそうです。

Webサイト上で表示する方法

必要なファイルが用意できたら、実際にWebサイトで表示してみましょう。フォルダの中に下記の3つのファイルを作成しましょう。

├── index.html
├── main.js
└── animation.json

それぞれのファイルの内容については下記のとおりです。

index.html

まず、headタグの中でlottie.jsかlottie.min.jsを読み込みます。下記はCDNを使用した場合のコードになります。


  

次に、bodyタグの中は下記のように記述します。


  

Lottieアニメーションを表示する要素をJavaScript側から指定するので、ここではid="lottie"としています。

main.js

main.jsでは、lottieの呼び出し処理を行います。

lottie.loadAnimation({
  container: document.getElementById("lottie"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "animation.json"
});

上記のcontainerオプションでアニメーションを表示する要素を指定しています。HTML側で異なるidを指定している場合は、上記のidもそれを指定するようにしましょう。

loopやautoplayなどのオプションを指定していますが、その他にも任意のタイミングでアニメーションを開始したり、停止したり、コントロールするためのメソッドが用意されています。

詳細については下記のドキュメントを参考にしてみてください。

animation.json

このjsonファイルは、上記で用意したアニメーションファイルをそのまま配置すればOKです。

Lottieを使ったアニメーションのサンプル

最後に、Lottieを使って表示されているアニメーションの参考例をご紹介したいと思います。

See the Pen
Articulation Pieces by Al Boardman
by kittons (@airnan)
on CodePen.

幾何学図形を使ったアニメーションです。ローディングアニメーションや、画面遷移時のアニメーションに使えそうですね。

See the Pen
Channel Surfing by Markus Magnusson (in svg)
by kittons (@airnan)
on CodePen.

これは2,3秒のアニメーションがループ再生されています。キービジュアルにこのようなアニメーションを用意すればWebページの雰囲気が大きく変わりそうですね。

See the Pen
Bacon Pancakes
by kittons (@airnan)
on CodePen.

可愛らしい犬のキャラクターがダンスをしているアニメーションです。このような非常に短いループアニメーションを表示することも可能です。

See the Pen
Svg text banner
by kittons (@airnan)
on CodePen.

こちらはテキストを取り入れたアニメーションです。単純なアニメーションだけでなく、少し長い動画もLottieで表示することができます。