Lottie playerを使ってアニメーションを表示
この記事は約 2 分で読めます。
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 Mikhail Voloshin
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました