サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。
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();ホバーとかで使えそうなので、サンプルもつくってみました。
※ アニメーションはデザイナーのありさんに作ってもらいました。ありがとう、ありがとう。
けっこう組み込む側は簡単なのではないでしょうか。
JSONがそこそこ大きくなるので、読み込みのタイミングの問題だったり、たくさん同時に動かすとなると、パフォーマンスはけっこう気を使う必要はありそうです。
After Effectsを使える人がいるのが条件にはなってきますが、かなり簡単にリッチなアニメーションを実装できそうです。
うまくつかっていきたいです、ではまた。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
