WebにLottieのアニメーションを導入してみる


↑Lottieによるアニメーション

 Webでアニメーションを使おうとしたらGIF、FLASH、プレーヤ組み込みなどがあっただろか。このあたりでairbnb製の軽量なアニメーションリソースを使う手段として、Lottieというものが数年前に出てきている。
 Webで使うには、
1. Lottieのjsを読み込む
2. ↑で準備されるjsオブジェクトで、LottieアニメーションのリソースとなるJSONを読み込む

 IE11にも対応しているので汎用性は高い。Expressフレームワークを使って表示するまでをやってみる。

===

 まずJSプロジェクトの用意、パッケージのインストール。
npm init

npm i -S lottie-web express


---

 アプリケーションディレクトリをappという名前で作成して、app.jsを置く。静的ファイルをサーブできるようにしておく。
app/app.js

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.use(express.static('public'));

app.listen(3000, () => console.log('Example app listening on port 3000!'))


---

 ディレクトリapp/public/jsに、lottieのJSをコピーする。
$ cp node_modules/lottie-web/build/player/lottie.js app/js/lottie.js 


---

 表示したいlottieアニメーションのJSONを用意して、ディレクトリapp/public/lottie_jsonに入れておく。

---

 ディレクトリapp/publicにdemo.htmlを用意して、lottieのJS、lottieアニメーションのJSONを読み込ませる。
app/public/demo.html

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8" />
<title>Demo</title>
<style>
#demo {
width: 400px;
height: 400px;
}
</style>

</head>
<body>

<!-- lottie animation region -->
<div id="demo"> </div>

<!-- load lottie and animation json -->
<script src="js/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.getElementById('demo'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/lottie_json/Voice.json'
});
</script>

</body>
</html>


---

 サーバを走らせて、localhost:3000/demo.htmlにアクセスする。
cd app && node app.js




===
今回のリソースをまとめたリポジトリ

 これ書いてる時点でlottie.min.jsが245kB。今回使用したアニメーションのJSONは10kB。一度lottie.min.jsonを読み込んでしまえば、あとのアニメーション追加はそんなにコストにならないなという印象。アニメーション追加の方法として抑えておきたい。アニメーションアイコンとかよさげ。

comment: 0