Lottie形式のアニメーションを実装してみた

こんにちは、ナカムラです。
最近サイトを作る中でアニメーションを実装する機会が多かったので、もっと実装に良さそうな手法はないものかと探したところ、Lottieに辿り着きました。
あまり最近の紹介記事が見つからなかったので流行りのものではないかもしれないですが、WEBデザイン集などに掲載されているサイトの中では時々見かけるのでサクッと使いたい時などに良いかもしれません。

元々の開発者は今はRive（ReactやFlutterといったフレームワーク向けライブラリ）というものを作られているらしいです。
Rive — a new way to design, build, and ship user interfaces

Lottieの方がとっつきやすそうだったので試してみました。

Lottieとは？

ベクター画像のアニメーション用に作られたJSON形式のファイルフォーマットです。
PNGやGIFのアニメーションよりもはるかに軽量に実装できます。
JavaScriptによるプレイヤーを読み込み込んで実装します。

アニメーションを用意するにはアカウントが必要になりますが、アニメーションを用意してもらって実装するだけならアカウントは不要です。
有料のアニメーション素材もあります。

lottiefiles.com

LottieとdotLottie

Lottieは一つのアニメーションをJSON形式で作られます。（ファイルの拡張子はjson）
dotLottieはzip形式をベースにした新しいコンテナフォーマット。（ファイルの拡張子はlottie）
dotLottieの方が軽量になりました。

DEMO

早速ですがデモをご覧ください。
アニメーションするイラストがあり、その下に「pause / play」ボタンがあります。
ボタンをクリックするとアニメーションが停止または再生します。

See the Pen Lottie形式のアニメーションを実装してみた by Nakamura (@takayo-nakamura) on CodePen.

まず実装に必要なプレイヤーを読み込みます。

// 実装に必要なプレイヤーを読み込む
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

その後にアニメーションの実装としてインスタンスを生成します。
挿入する要素や自動再生するかなど、ここでオプションも設定します。

// アニメーションの実装
const dotLottie = new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.querySelector('#dotlottie-canvas'),
    src: "https://lottie.host/bcb241ab-1d08-4a5f-83c7-08e27538b6a2/fImFmuOVcv.lottie", // or .json file
});

停止／再生のボタンはaddEventListenerでプロパティ（isPlaying）で状態を判定してからメソッドを実行します。

// アニメーションを停止または再生する
const button = document.getElementById('controller')
button.addEventListener('click', ()=> {
  if (dotLottie.isPlaying) {
    dotLottie.pause();
  } else {
    dotLottie.play();    
  }
})

参考リンク

開発者向けドキュメント
https://developers.lottiefiles.com/

プロパティ・メソッド・イベントなどはこちら
https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/

アニメーションの作り方

LottieFiles上で共有されているアニメーションを利用する方法と、自作する方法があります。
LottieFilesはLottie形式のアニメーションを管理・共有するサイトです。
アニメーションを共有しあうコミュニティサイトのような役割をしています。ログインするとMy Dashboardにアクセスできます。
※自分で作る場合は必ずしもLottieFilesを経由する必要はありません。

すでに作られたアニメーションを使う

LottieFilesのPremium animation packs（有料素材）やFree community animations（無料素材）からダッシュボードへダウンロードする。
ダッシュボードに追加されたダウンロードしたアニメーションをクリックすると編集画面へ遷移します。
画面右上のダウンロードマークをクリックすると、dotLottieかLottie JSONのダウンロードが可能です。

デモでは</> Handoffタブを選択し、CDNにチェックを入れてAsset linkを使用しました。
ダッシュボードの一覧から各アニメーションカードの右上にあるチェックをクリックすることで画面下のダウンロードボタンからdotLottieまたはLottie JSONを一括でダウンロードすることも可能です。

自分で作る

自分で作る方法はいくつかあります。

Lottie Creatorを使用する

LottieFilesのダッシュボードページへアクセスし、右上にある「+NEW」ボタンから新規作成し、ウェブブラウザ上（Lottie Creator）で作成することができます。

FigmaまたはAfterEffectsを使用する

拡張機能を使えばFigmaやAdobeのAfterEffectsからアニメーションファイルを書き出すことができるので、デザイナーが慣れたツールで作成することができます。

Figmaの拡張機能
LottieFiles for Figma - あなたのデザインを高めて、Figmaでアニメーションを作成し、Lottieに変換します

AfterEffectsの拡張機能
LottieFiles for Adobe After Effects: Streamline your animation workflow

まとめ

アニメーションの作り方はよくわかりませんが、実装自体は簡単にできました。
いつもはGSAPをよく使いますが、アニメーションに必要なパーツをCSSで大きさや位置を指定してからアニメーションを加えていく、という作業はあまり細かいものには向いていないです。
今回のような細かいイラストの動きなどにはLottieの方が良いですね。

操作手順のアイコンなど、動画よりももっと簡単に説明したいものなどに向いていそうです。

Javascriptが苦手だという方でもアニメーションを置くだけならコピペで実装できるジェネレーターもありますのでお試しください。

Web-player（簡単ジェネレーター）
https://lottiefiles.com/tools/web-player