Nuxt.js Lottie 사용하기

https://medium.com/@fonto.design/using-lottie-in-nuxt-js-554949d19063

Using Lottie in Nuxt.js

https://github.com/chenqingspring/vue-lottie

GitHub - chenqingspring/vue-lottie: Render After Effects animations on Vue based on Bodymovin

 

vue-lottie 설치

 

 

npm install --save vue-lottie

or

yarn add vue-lottie

 

 

적용

 

<template>
    <!-- width and height are optional -->
    <lottie :width="1024" :height="1024" :options="lottieOptions" v-on:animCreated="handleAnimation" />
</template>


import lottie from 'vue-lottie/src/lottie.vue'
import * as animationData from "~/assets/animation.json";
export default {
  components: {
    lottie
  },
  data() {
    return {
      anim: null, // for saving the reference to the animation
      lottieOptions: { animationData: animationData.default }
    };
  },
  methods: {
    handleAnimation: function (anim) {
      this.anim = anim;
    }
  }
}

 

 

기본 사용법 + 옵션설정

 

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        this.anim.stop();
      },

      play: function () {
        this.anim.play();
      },

      pause: function () {
        this.anim.pause();
      },

      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>

 

 

추가) Component화

 

사용법대로 사용해도 작동은 하나 불편한 점이 있다. lottie를 다양한 페이지에서 사용하고 싶을 때에 직접 lottie파일을 import해야한다는 점이다. 그래서 Nuxt에서 사용할 컴포넌트로 바꿔보았다.

 

Lottie.vue

<template>
  <div>
    <lottie
      :options="defaultOptions"
      :height="400"
      :width="400"
      @animCreated="handleAnimation"
    />
  </div>
</template>

<script>
import lottie from 'vue-lottie/src/lottie.vue';

export default {
  name: 'LottieComponent',
  components: {
    lottie
  },
  props: {
    animationData: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      defaultOptions: { animationData: null },
      animationSpeed: 1,
    }
  },
  created() {
    this.defaultOptions.animationData = require("~/assets/lottie/test-lottie.json");
  },

  methods: {
    handleAnimation (anim) {
      this.anim = anim;
    },

    stop() {
      this.anim.stop()
    },

    play() {
      this.anim.play()
    },

    pause() {
      this.anim.pause()
    },

    onSpeedChange() {
      this.anim.setSpeed(this.animationSpeed)
    },
  },
}
</script>

 

이제 모든 페이지에서 다음과 같이 사용할 수 있다.

<Lottie animation-data="~/assets/lottie/test-lotte.json" />