Lottie(ロッティー)とは
Airbnbから登場したiOS、Android、React Native対応のアニメーションライブラリ
Adobe After Effectで作成した動画をjsonに書き出し、ページ上にSVGやキャンバスなどで組み込んで描画してくれます。
今回はオープニングアニメーションを実装するのにLottieを使ってみたので備忘録的な。
(デザイナーさんがAfterEffectを駆使してjsonを用意してくれたのでjs実装のみです)
まずはライブラリをインストール
https://www.npmjs.com/package/lottie-web
npm i lottie-web
jsonの保存先は
assets/animation/sample.json
さっそくlottieを読み込んで行きます。。。!
components/Lottie.vue
<template lang="pug">
.animationItem(ref="animationContainer")
</template>
<script>
import lottie from 'lottie-web'
export default {
mounted() {
const animationEvt = () => {
const anim = lottie.loadAnimation({
container: this.$refs.animationContainer,
renderer: 'svg',
loop: false,
autoplay: true,
animationData: this.options.animationData
})
anim.addEventListener('complete', () => {
//処理
})
}
const AnimStorage = () => {
if (sessionStorage.getItem('access')) {
// 初回アクセス以外の処理
} else {
// 初回アクセス時の処理
animationEvt()
sessionStorage.setItem('access', 0)
}
}
AnimStorage()
}
</script>
sessionStorageを使って初回アクセス時にのみアニメーションする処理をしています。
lottieにはいくつかのオプションが用意されていて、
container: アニメーションを表示する要素を指定します。
renderer: アニメーションを出力する形式を指定します。svg/canvas/htmlの形式が指定できますが、基本的にsvgで問題なし。
loop: アニメーションを繰り返し再生するか指定します。再生し続ける場合は"true"に。
autoplay: 自動再生です。trueで自動再生します。
animationData: アニメーションのデータファイルを指定します。
その他にも、
rendererSettings: {
className: 'クラス名'
}
でクラス名を追加することもできます。
今回はオープニングアニメーションとして使うのでTOPページにLottie.vueをimportします。
pages/index.vue
<template lang="pug">
article
Lottie(:options='lottieOptions')
</template>
<script>
import Lottie from '~/components/Lottie.vue'
export default {
components: {
Lottie
},
asyncData() {
return {
lottieOptions: {
animationData: require(`~/assets/animation/sample.json`)
}
}
},
}
</script>
所感
はじめてLottieを使ってみましたが、簡単にアニメーションを表示できるのでとても便利でした。
画面いっぱいに表示させる仕様だったのでオープニングアニメーションとして使うとなるとパフォーマンス的にちょっと厳しいと感じる部分もあり、Lottieを効果的に扱えるようにもっと工夫が必要だなと実感しました。。。
参考
公式
Nuxt + Lottieでお手軽アニメーション
AfterEffects+Lottieを使ったアニメーションをWebサイトで表示させてみた