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のアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像1

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

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

npmのコンソールで次のコマンドを実行してパッケージをインストールすると、lottie.min.js を入手できます。
npm install lottie-web
Visual Studioでnpmパッケージを利用する場合
Visual Studioでnpmパッケージのインストールや管理ができます。
Visual Studioでのnpmパッケージの操作方法についてはこちらの記事を 参照してください。

npmパッケージのインストール先のフォルダを開きます。
Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像3

パッケージ名の lottie-web フォルダが作成されていますので、このフォルダを開きます。
Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像4

パッケージのファイルが表示されます。buildフォルダを開きます。
Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像5

buildフォルダ内に、lottie.js, lottie.min.js ファイルが配置されています。
Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像6

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

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

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

GitHubのリポジトリからファイルをダウンロードする方法です。
GitHubのLottieプロジェクトのページ(https://github.com/airbnb/lottie-web)にアクセスします。
Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像7

リポジトリの /build/player ディレクトリ内に lottie.min.js ファイルがあります。ファイル単体をダウンロードするか、 リポジトリをzipファイルでダウンロードして展開して、lottie.min.js を取り出します。
Lottieのアニメーションを再生するJavaScript (lottie.js, lottie.min.js) を取得する:画像8
このページのキーワード
  • Lottieのアニメーションを再生するJS (lottie.js, lottie.min.js) を取得する
AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2023-02-21
Copyright © 1995–2025 iPentec all rights reserverd.