3ヶ月前に投稿

Lottie playerを使ってアニメーションを表示

この記事は約 2 分で読めます。

4.5

Lottieとは、Airbnbが開発した
アニメーションライブラリです。
Lottieは JSONベースの
アニメーション ファイル形式で、
Webサイト上で高クオリティの
アニメーションを簡単に表示することができます。
Lottieについて詳細はこちらを参照ください。

Lottieを使えば、
ちょっとしたコードだけで簡単に
アニメーションを表示することができます。

Lottieの公式サイトに用意されている
LottieFiles」から
世界中のクリエイターが投稿している
アニメーションをLottieを使って
サイトに表示させるところをやってみます。

まずは、
お好みのアニメーションを
選ぶところから始めます。

お好きなアニメをクリックすると
ポップアップ画面が表示されるので、
<html> をクリックします。

Generate Codeで
アニメーションを調整します。
width、heightなどのパラメータを調整、
再生ボタンなどのControlsはいらないので
チェックは外しておきます。

あとはコードをコピーして、
自分のブログに貼り付けるだけです。

結果は以下になります。

LottieFiles by Amzad Hossain

こんな感じで
簡単にアニメーションを
表示させることが
出来ます。

※ 上記の説明画像とは
違うアニメーションを表示しています。

ライセンスの明記

LottieFilesで利用可能なすべての公開ファイルは、
特に明記されていない限り、
クリエイティブ・コモンズ(CC) 表示(BY)の下で配布されます。
LottieFilesは、可能な限り
元のアニメーションへのリンクと一緒に
アトリビューションを配置することをお勧めします。
LottieFilesは、クリエイターが
適切にクレジットされている限り共有することができます。

以下は、
可愛らしい猫のアニメーションを
ピックアップしてみました。

LottieFiles by Vlastelin

LottieFiles by Issey

LottieFiles by Mikhail Voloshin

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Lottie playerを使ってアニメーションを表示