14
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.jsでLottieを使う

Last updated at Posted at 2020-03-13

Lottie(ロッティー)とは

Airbnbから登場したiOS、Android、React Native対応のアニメーションライブラリ
Adobe After Effectで作成した動画をjsonに書き出し、ページ上にSVGやキャンバスなどで組み込んで描画してくれます。

今回はオープニングアニメーションを実装するのにLottieを使ってみたので備忘録的な。
(デザイナーさんがAfterEffectを駆使してjsonを用意してくれたのでjs実装のみです:clap:

まずはライブラリをインストール
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>

sample-min.gif
*実際はもっと滑らかにテンポよく動きます

所感

はじめてLottieを使ってみましたが、簡単にアニメーションを表示できるのでとても便利でした。
画面いっぱいに表示させる仕様だったのでオープニングアニメーションとして使うとなるとパフォーマンス的にちょっと厳しいと感じる部分もあり、Lottieを効果的に扱えるようにもっと工夫が必要だなと実感しました。。。

参考

公式
Nuxt + Lottieでお手軽アニメーション
AfterEffects+Lottieを使ったアニメーションをWebサイトで表示させてみた

14
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?