【10分】Lottieを使ってwebにおしゃれなアニメーションを簡単に実装する - inokawablog

【10分】Lottieを使ってwebにおしゃれなアニメーションを簡単に実装する

Lottieとは?

そもそもLottieとはairbnbが開発したもので、ライブラリを使い、JSONファイルを組込むことで軽量に、かつ簡単に高品質のアニメーションを実装することができるめっちゃ便利なものです。

さらに、ネイティブアプリにも高品質のアニメーションを簡単に作成することができます。

Lottieを使うことでエンジニアでも、綺麗なアニメーションを実装することができます。

 

今回は3パターン実装します。

1つはロード画面です。Lottieではすでにおしゃれで可愛いロードアニメーションが豊富に用意されています。

もう一つは、ブラウザが読み込まれたら一回だけアニメーションします。

最後は、クリックしたらアニメーションが起こる場合を実装します。例えば、お問い合わせフォームを送信したら、完了のアニメーションとか、です。

 

早速やっていきましょう。

 

こちらから好きなアニメーションを選択して下さい。

アニメーションを選択すると右上にJSONファイルをダウンロードする部分があるのでそこをクリックして下さい。また、このダウンロードページの下部には"Edit Layer Colors"というボタンがあり、そこをクリックするとアニメーションの色を自由自在に設定することができます。

lottieアニメーションダウンロード

 

そして、Lottieを実行するためのlottie.min.jsまたはlottie.jsファイルをこちらからダウンロードしてください。lottie-web-master  >  build  >  playerにlottie.min.jsが入っています。

 

<script src="lottie.min.jsまでのパス"></script>

これを<head></head>の中に書いて下さい。

 

ロードアニメーション

ロードアニメーションの場合、ループをさせるので、loopのオプションをtrueにします。

 

表示部分は全て共通です。

表示部

<div id="animation" class="lottie-animation"></div>

 

script

var animationTivel = lottie.loadAnimation({
	container: document.getElementById('animation'),
	renderer: 'svg',
	loop: true,
	autoplay: true,
	path: "{.jsonまでのパス}"
});

idを指定するだけで簡単に実装できてしまいます!

このようなループするアニメーションになります。これは実際にこのサイトのお問い合わせフォームで送信完了のアニメーションとして使っています。

一回だけアニメーション

次は、ブラウザが読み込まれたら一回だけアニメーションが再生されます。

var animationTivel = lottie.loadAnimation({
	container: document.getElementById('animation'),
	renderer: 'svg',
	loop: false,
	autoplay: true,
	path: "{.jsonまでのパス}"
});

先ほどの設定とほとんど同じで、違うのはloopの部分です。falseにすることで1回だけアニメーションをします。

設定を変更することで簡単にアニメーションを制御できるのはとてもありがたいですね。

 

クリックアニメーション

最後はクリックアニメーションです。

表示部にボタンを追加して下さい。

<button type="button" name="button" id="button">アニメーションボタン</button>

 

script

var animationTivel = lottie.loadAnimation({
	container: document.getElementById('animation'),
	renderer: 'svg',
	loop: false,
	autoplay: false,
	path: "{.jsonまでのパス}"
});
document.getElementById("button").onclick = function() {
  animationTivel.play();
  animationTivel.playSegments([30,75],true);
};

 

loopとautoplayをfalseにしておきます。autoplayをfalseにすることで勝手にアニメーションが再生されなくなります。

ボタンがクリックされたらplayでアニメーションを実行します。またstopでアニメーションを止めることもできます。

animationTivel.playSegments([30,75],true);でアニメーションが再生される時間の範囲を指定しています。

下のボタンをクリックしてみて下さい。

 

 

 

 

以上になります。とっても簡単に実装することができました。Lottieを使うことでwebサイトをリッチにすることができます。

もっと細かい設定はこちらのgithubから確認することができます。

ぜひ使ってみて下さい。

 

Vue Native・React Nativeで実装したものをこちらにまとめてあります。

Vue Nativeとは?React Nativeを知らなくてもスマホアプリができる?

 

おまけ

アイコンのアニメーションとかAfter Effectで作るのって面倒ですよね?

そんな時にはこのサイト

超便利です。今回実装したような方法で簡単にアイコンのアニメーションをリッチにすることができます!!

よかったらのぞいてみて下さい。みてるだけでも楽しいです。特にSocial Mediaのアイコンをみて見てください。めちゃめちゃ可愛いです。