Nuxt.jsでLottieを使う

#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

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サイトで表示させてみた