Lottieを使い、Nuxtアプリにアニメーションを加える！

assets/animation/LottieAnimation.json

npm install lottie-web
#もしくは
yarn add lottie-web

<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
  import lottie from 'lottie-web';
  export default {
    props: {
      options: {
        type: Object,
        required: true
      },
      height: Number,
      width: Number,
    },

    data () {
      return {
        style: {
          width: this.width ? `${this.width}px` : '100%',
          height: this.height ? `${this.height}px` : '100%',
          overflow: 'hidden',
          margin: '0 auto'
        }
      }
    },
    mounted () {
      this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: false, //アニメーションを繰り返す場合は[true]
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData.default,
          rendererSettings: this.options.rendererSettings
        }
      );
      this.$emit('animCreated', this.anim)
    },
  }
</script>

<template>
    <v-app>
      <section v-if="show" class="container">
        <div>
          <lottie :options="defaultOptions" v-on:animCreated="handleAnimation" />
        </div>
      </section>
    </v-app>
    </template>
    
    <script>
    import Lottie from "~/components/Lottie.vue";
    import * as animationData from "~/assets/animation/LottieAnimation.json";
    
    export default {
      components: {
        Lottie,
      },
      data() {
        return {
          defaultOptions: {
            animationData: animationData
          },
          animationSpeed: 1,
          show: true,
        };
      },
      created: function(){
        setTimeout(() => {
          this.show = false}
          ,7000
        )
      },
      methods: {
        handleAnimation: function(anim) {
          this.anim = anim;
        }
      }
    };
    </script>

import * as animationData from "~/assets/animation/loadingAnimation.json";

上のコードの部分でLottieで取得した、JSONファイルを読み込んでいます。
これで、Lottieのアニメーションを実行することができます。

まとめ

今回は「Lottie」をNuxt.jsで使用してみました。初めて「Lottie」使ってみましたけど、簡単にアニメーションを実装できて結構便利！
次は「After Effects」で作ったアニメーションを乗せていきたいと思います。
それでは今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！