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 を入手できます。
Visual Studioでnpmパッケージを利用する場合
Visual Studioでnpmパッケージのインストールや管理ができます。
Visual Studioでのnpmパッケージの操作方法については
こちらの記事を
参照してください。
npmパッケージのインストール先のフォルダを開きます。
パッケージ名の
lottie-web
フォルダが作成されていますので、このフォルダを開きます。
パッケージのファイルが表示されます。
build
フォルダを開きます。
buildフォルダ内に、lottie.js, lottie.min.js ファイルが配置されています。
方法3: bower パッケージをインストールする
bower のコンソールで次のコマンドを実行してパッケージをインストールすると、lottie.min.js を入手できます。
方法4: GitHubからダウンロードする
GitHubのリポジトリからファイルをダウンロードする方法です。
GitHubのLottieプロジェクトのページ(
https://github.com/airbnb/lottie-web)にアクセスします。
リポジトリの
/build/player
ディレクトリ内に lottie.min.js ファイルがあります。ファイル単体をダウンロードするか、
リポジトリをzipファイルでダウンロードして展開して、lottie.min.js を取り出します。
このページのキーワード
- Lottieのアニメーションを再生するJS (lottie.js, lottie.min.js) を取得する
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-06-03
作成日: 2023-02-21