開発コストを削減「BiTT開発」って?
開発コストを削減「BiTT開発」って?
2019.08.22

アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。

づや

サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。

CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします(もちろん必要なときはいっぱいあるのでケースバイケースですが)。

制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。

そんな悩みを解決してくれるかもしれない「Lottie」を試してみました!

※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。

Lottieとは

Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。

一部使えない機能もあるらしいですが、Adobe After Effectsが使えると簡単にWebでのアニメーションが作成できる、便利なライブラリですね。

LottieFilesという公式ページにいろんな方が作ってくれたアニメーションがたくさんのっていてます。

こちらに載っているアニメーション素材は、クリエイティブ・コモンズライセンス2.0の条件のもと、無料でダウンロード・利用できるものです。

Lottieの使い方

なにはともあれまずはLottieの読み込みをしていきましょう。

lottie-webからLottieが取得できます。

lottie.min.jsを読み込むことで利用可能になります。

<script src="lottie.min.js"></script>

npmとbowerにも対応してます。なので私はnpmを使いました。

npm install lottie-web

対象のファイルを読み混んだら、Adobe After Effectsから書き出したJSONを読み混んだらもう動きます。
基本の形は下記です。

let lottieObj = lottie.loadAnimation({
  container: document.getElementById('sample'), // 表示させたい要素を渡します
  renderer: 'svg', // 描画形式を指定します. // svg or canvas or html svg以外ちゃんとためしてないですが
  loop: true, // trueにしたらループです。1回再生の場合はfalseで
  autoplay: true, // 自動再生です。falseの場合は自分のタイミングで
  path: 'data.json' // 再生させたいアニメーションのjsonのパスを指定します。
});

どうでしょうか、これでもう再生されています。

Web上で使うために

ずっと再生させておくならこれで事足りるのですが、任意のタイミングでいろいろしたいときは下記のように使えます。

まずインスタンスを変数にいれておきます。

let lottieObj = lottie.loadAnimation({
  container: document.getElementById('sample'), 
  renderer: 'svg', 
  loop: false, 
  autoplay: false, // 自動再生させないように
  path: 'data.json' 
});

そして任意のタイミングでplayをよんであげればよいです。

クリックで再生させるならこんな感じ

document.getElementById('test-link').addEventListener("click" , function(){
   lottieObj.play();
});

よく使いそうな関数はこのあたりでしょうか。

// 動きを止める
lottieObj.stop(); 

// 再生の方向決める
lottieObj.setDirection(-1); // -1を渡すと逆再生
lottieObj.setDirection(0); // これがデフォルト。普通に再生

// デストロイ!!
lottieObj.destroy();

ホバーとかで使えそうなので、サンプルもつくってみました。

サンプル
http://liginc.co.jp/demo/2019/09/zuya_loitte/lo2.html

※ アニメーションはデザイナーのありさんに作ってもらいました。ありがとう、ありがとう。

けっこう組み込む側は簡単なのではないでしょうか。

JSONがそこそこ大きくなるので、読み込みのタイミングの問題だったり、たくさん同時に動かすとなると、パフォーマンスはけっこう気を使う必要はありそうです。

After Effectsを使える人がいるのが条件にはなってきますが、かなり簡単にリッチなアニメーションを実装できそうです。

うまくつかっていきたいです、ではまた。

2