動くを、
コードで自在に。
Lottie は After Effects のアニメーションを JSON で配信する仕組み。ベクターのまま無限に拡大でき、数 KB と軽量、 そして再生・色・進捗まで JavaScript から操作できます。スクロールして体感してください。
WHAT IS LOTTIE
Lottie とは何か
Airbnb 発のオープンな仕組みで、After Effects のアニメーションを JSON 形式のベクターデータ として書き出し、各プラットフォームのプレイヤーで再生します。画像でも動画でもない「動きの設計図」です。
圧倒的に軽い
図形と座標の JSON なので、フルカラーの複雑なアニメでも数 KB〜数十 KB。同等の GIF/動画の数分の一以下です。
解像度に依存しない
ベクターで描画するため、スマホでも 4K でも常にくっきり。Retina 用に画像を何枚も用意する必要がありません。
コードで動かせる
再生・停止・速度・方向・コマ移動・セグメント・色変更まで、すべて JavaScript から操作可能です。
どこでも同じ動き
Web・iOS・Android・Flutter・React Native で共通の JSON を再生。1 つ作れば全プラットフォームで動きます。
デザイナーがそのまま作れる
After Effects で作ったモーションを Bodymovin で書き出すだけ。実装での再現ズレが起きません。
透過・重ね合わせ自由
背景は完全透過。テキストや UI の上に違和感なく重ねられ、GIF のような縁取りも出ません。
01 — CONTROL
再生を、プログラムから完全制御
GIF や動画と違い、Lottie は再生・停止・速度・方向・コマ送りまで API で操作できます。下のパネルはすべて lottie-web の呼び出しに直結しています。
02 — INTERACTION
ユーザー操作に反応する
ホバー・クリック・スクロールなど、あらゆるイベントを再生のトリガーにできます。マイクロインタラクションに最適です。
03 — MORPH
形そのものが溶けて変わる
Lottie は1本のパスの頂点を別の形へ補間できます。GIF や動画では「コマの差し替え」しかできませんが、ベクターのパス補間なら、どんな大きさでも滑らかに形が変形します。
- パス補間: 同じ頂点数の形状どうしを、頂点と接線(ベジェ制御点)ごとに中割りします。
- 無段階に滑らか: 中間フレームは計算で生成されるため、何倍に拡大しても階段状になりません。
- 用途: アイコンのトグル(メニュー ⇄ 閉じる)、ロゴの変形、ローディングの表情づけなど。
ks.k: [ state0, state1, … ] ← 頂点を補間
04 — SCROLL
スクロールと完全同期
再生位置をスクロール量に直接ひも付けられます。ストーリーテリングやプロダクトツアーで威力を発揮します。下にスクロールするとリングが満ちていきます。
scrollY -> goToAndStop(progress × totalFrames)
05 — DATA, NOT PIXELS
色も形もデータだから書き換え自在
Lottie の中身はただの JSON。実行時に色を差し替えても劣化しません。下のボタンで配色を切り替えると、同じファイルが一瞬で別テーマに変わります。ブランドカラーへの動的適応も同じ仕組みです。
やっていること:JSON 内の fl(塗り)と st(線)のカラー値を走査し、 選んだパレットへ置換して再レンダリング。元の動き・サイズはそのまま、色だけが変わります。
"#22d3ee", "#ec4899", "#f59e0b", …]
)
06 — GENERATED
1つの定義から、数十の図形を
Lottie の「リピーター」は、ひとつの図形を変形しながら複製します。下のマンダラはリング3本の定義だけで描かれ、それでもファイルはごくわずか。形が増えてもサイズは増えません。
c: 24, tr.r: 15° ← 1図形を回転しながら複製
07 — WHY LOTTIE
GIF・動画・連番画像との違い
同じ「動き」を実現する手段はいくつもありますが、軽さ・画質・操作性を同時に満たせるのは Lottie だけです。
| Lottie | GIF | MP4 動画 | PNG連番 | |
|---|---|---|---|---|
| ファイルサイズ | 数KB〜 | 大きい | 中〜大 | 非常に大きい |
| 拡大しても綺麗 | 対応 | 非対応 | 非対応 | 非対応 |
| 背景の透過 | 対応 | 限定的 | 非対応 | 対応 |
| 色・内容を動的変更 | 対応 | 非対応 | 非対応 | 非対応 |
| クリック等で操作 | 対応 | 非対応 | 限定的 | 実装次第 |
| 再生制御(速度/逆/コマ) | 対応 | 非対応 | 限定的 | 実装次第 |
| 全OS共通の素材 | 対応 | 対応 | 概ね | 非対応 |
08 — IN THE WILD
使いどころ
数 KB の Lottie ひとつで、プロダクトの体験はぐっと豊かになります。ここに並ぶのもすべて自前生成のサンプルです。