Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する

Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する方法を紹介します。

方法1: CDNから取得する

一番簡単な方法です。CDNを利用して、lottie.min.js を取得します。

CDNのURLは、https://cdnjs.com/libraries/bodymovin から取得できます。

Lottie-web (https://cdnjs.com/libraries/lottie-web)からもlottie.min.jsを取得できますが、 オフィシャルのドキュメント(https://airbnb.io/lottie/#/web)では、bodymovin のURLを利用する方法が記載されています。

方法2: npmパッケージをインストールする

npmのコンソールで次のコマンドを実行してパッケージをインストールすると、lottie.min.js を入手できます。

npm install lottie-web

npmパッケージのインストール先のフォルダを開きます。


パッケージ名の lottie-web フォルダが作成されていますので、このフォルダを開きます。


パッケージのファイルが表示されます。buildフォルダを開きます。


buildフォルダ内に、lottie.js, lottie.min.js ファイルが配置されています。

方法3: bower パッケージをインストールする

bower のコンソールで次のコマンドを実行してパッケージをインストールすると、lottie.min.js を入手できます。

bower install bodymovin

方法4: GitHubからダウンロードする

GitHubのリポジトリからファイルをダウンロードする方法です。

GitHubのLottieプロジェクトのページ(https://github.com/airbnb/lottie-web)にアクセスします。


リポジトリの /build/player ディレクトリ内に lottie.min.js ファイルがあります。ファイル単体をダウンロードするか、 リポジトリをzipファイルでダウンロードして展開して、lottie.min.js を取り出します。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。