Lottieアニメーション埋め込み

このチュートリアルでは、lottie-webライブラリを使用してLottieアニメーションを埋め込む方法を実演します。LottieはJSONベースのアニメーションファイル形式で、静的アセットと同じように簡単にあらゆるプラットフォームでアニメーションを配信できます。ファイルサイズが小さく、あらゆるデバイスで動作し、ピクセル化せずに拡大縮小できます。

Lottieアニメーションの主な利点はベクター形式であることです。どんな解像度でも鮮明なまま表示されます。lottie-webライブラリを使えば、Webプロジェクトでこれらのアニメーションを簡単に読み込み、制御し、レンダリングできます。

この例では、ページ読み込み時に自動再生されるサンプルアニメーションを埋め込みました。インターフェースには、プログラムによるアニメーション制御を実演するための再生、一時停止、停止コントロールが含まれています。テーマ切り替えボタンは、Lottieアニメーションが異なるカラースキームにどのように適応できるかを示しており、ライトモードとダークモードの両方のデザインに適応できます。

独自のプロジェクトでLottieを使用するには、CDNまたはnpm経由でlottie-webライブラリを含め、アニメーションJSONファイル（Bodymovinプラグインを使用したAdobe After Effectsで作成）を準備し、ニーズに合った設定オプションで初期化します。