Lottieで簡単にWebアニメーションを追加する方法
はじめに
LottieとはAirBnbの開発したライブラリ、ベクターアニメーションのファイル形式です。データがJSONで記述されるため、ファイル容量を軽く、もちろんプログラムで自由にアニメーションを制御することも可能です。
ちなみにDuolingoのアニメーションにもLottieが使われており、私はそれを知ってからLottieを使ってみたくなりました。
公式サイト：https://airbnb.design/lottie/
アニメーションの作成方法
アニメーションの作成にはAfter Effectsを利用します。アニメーションが完成したらBodyMovin というエクステンションを入れてエクスポートするだけです。
ただし、利用できるAfter Effectsの機能には制限があるため注意です。最悪1フレームずつトレースすることで生成することも可能らしいです。利用できる機能の一覧はこちらを確認してください。
...アニメーションなんか作るの面倒だしだいたいAfter Effectsなんて持ってないんですけど！！という方はLottieFilesというサイトを使いましょう。世界中の親切な方たちの作ってくれたアニメーションを拝借することができます。
利用方法
Webの中にLottieを埋め込むにはlottie-web(リポジトリ：https://github.com/airbnb/lottie-web)というライブラリが使います。
npm install lottie-web
もしくはCDNから読み込む方法もあります。
サンプル（ドキュメントからコピペ）
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
loadAnimationからインスタンスが帰ってくるので、それを使ってアニメーションを制御します。
Reactでの利用方法
lottie-reactを利用する
これが最も手っ取り早くて簡単な方法です。
AirBnbの提供するlottie-reactというライブラリを利用します。
npm install @lottiefiles/react-lottie-player
サンプル（ドキュメントからコピペ）
import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';
class App extends React.Component {
constructor(props) {
super(props);
this.player = React.createRef(); // initialize your ref
}
render() {
return (
<Player
ref={this.player} // set the ref to your class instance
autoplay={false}
loop={true}
controls={true}
src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
style={{ height: '300px', width: '300px' }}
></Player>
);
}
}
export default App;
上のサンプルではsrcにURLを設定していますが、animationDataにJSONそのものを突っ込むこともできるのですが、その際、アニメーションを繰り返し再生するには、データをディープクローンしてから渡す必要があります。
まとめ
Lottieを使うと静止画を使っているかのような感覚で、Webアプリケーションなどに動きがある動きのあるパーツを埋め込むことができるのは便利かなと思います。
アニメーションを用意するのが少々手間ですが、使っていて楽しいです。
もし参考になりましたらTwitterのフォローをしていただけると嬉しいです。
それでは！
Discussion