見出し画像

Lottieについて (その２)

Ryupon

今日は会社でLottieについての研修担当になったので、いろいろ調べたことをまとめて記事にしたいと思います。
インストールまでについては、「Lottie使ってアニメーション書き出してみた」で紹介してあるのでそちらを見てもらえればと思いますが、今回はもう少し掘り下げた内容を書いて行こうかと思っているので参考までにどうぞ！

01. もう一度Lottieってなに？

という事で、もう一度追加要素をあわせて確認

Lottieとは

After Effectsで作成したアニメーションをwebやiosなどで表現できるようにするためのライブラリで、AEで作成するアニメーションを利用する場合は下記が含まれる

Lottie(ライブラリ)
Bodymovinで出力したファイルを再生するプログラム

Bodymovien(AE用プラグイン)
After Effectsで作成したアニメーションをJSONで出力するためのプラグイン

02. どんなことができる？

マルチプラットフォームに対応
iOS、Android、WebでLottieファイルをを使用して動作できます。

SVGファイルを使用することで拡大縮小しても、画質が劣化しない
また、動画ファイルに比べファイル容量も軽くなります。

アニメーションの制御ができる
メソッドやパラメーターなどを使用することでボタンアクションや、逆再生などのアニメーションの制御をすることができます。

03. 出来ないことは？

Lottieではまだサポートされていない表現があります。
After Effectsで作成する場合、エフェクトやエクスプレッションなどを用いたアニメーションは表現できないようです。
基本的に公式ドキュメントを確認して、極力シンプルなアニメーションを作った方が良さそうです。

▼サポートされている機能一覧はこちら

04. AEからBodymovinを使用して書き出されたファイルについて

インストールや書き出しについては、前回の記事を見てもらうとして今回はDemo(ローカルで確認)ファイルを一緒に書き出した場合に書き出されるファイルを説明いたします。
Demoを含め書き出した場合、下記のファイルが書き出されるかと思います。

deta.html

デモ用のプレビューファイルです。
こちらのファイルをブラウザで開くと実際のアニメーションを確認することができると思います。
html内には、Lottieライブラリ、実際に書き出されるJSONデータ、パラメーターなどが記述されています。
※ おそらくJSONファイルはセキュリティの関係上、動作できないため？

html内には下記のような設定がされているので補足ですが説明しておきますね。

var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData};

loop: true
ループ再生の有無を指定。ループさせたい場合はtrue、1回再生でストップさせたい場合はfalseを指定してください。

autoplay: true
自動再生の指定です。こちらもループ同様、自動再生したい場合はtrue、再生させない場合はfalseになります。

data.json

こちらがHTMLなどの実装に使用するファイルになります。

05. アニメーションの制御について

lottieはそのままアニメーション要素としてサイトの演出などで使用することもできますが、メソッドも用意されており、「アニメーション自体を制御」することや「クリックやマウスオーバーなどのイベントの操作」もすることができます。

アニメーションの再生・停止・一時停止

play()、stop()、pause()

フレームやアニメーションの制御

setSpeed(speed)
　→ アニメーションのスピードを制御(デフォルトは1)
goToAndStop(value, isFrame)
　→ 指定したフレームに移動して停止
goToAndPlay(value, isFrame)
　→ 指定したフレームに移動して再生
setDirection(direction)
　→ アニメーションの方向を制御。 デフォルトは0、逆再生は-1
playSegments(segments, forceFlag)
　→ 指定のフレーム間のみ再生する
destroy()
　→ html内のlottie要素の削除

などがあります
下記の公式ページを見るとまとめられているのでこちらも参考にしてみてね
https://airbnb.io/lottie/#/web

最後に

最後まで見て頂いたかはありがとうございます！
自分のメモ + 何かの参考になればと思って書きましたがいかがでしたでしょうか？
ちなみに今回、社内ように作ったアニメーションはこちら

以上で、今回のLottieについての記事は終わりになります。

いいなと思ったら応援しよう！