[Vue] vue-lottie 활용해 json 파일 로딩화면 구현하기

디자인이 들어간 프론트페이지들은 플랫폼 디자인에 맞춰 json 파일로 만들어진 로딩화면을 구현해야한다.

이 과정에서 lottie를 활용해 적용해보았다! 

 

• 적용예시 참고 사이트  https://www.npmjs.com/package/vue-lottie/
• 로티 사이트 / json 화면 동작 확인 사이트 https://lottiefiles.com/

LottieFiles - Download Free Lottie Animations, Integrations & Plugins

 

 

npm 설치

npm i vue-lottie

 

src/views/main.vue

<template>
  <div>
    <LoadingView v-if="loading" />
  </div>
<template>
<script>
  import LoadingView from "@/components/util/Loading.vue";
  export default {
  	components:{
     LoadingView,    //컴포넌트 활용
    }
    data(){
      return{
        loading:false,
      }
    }
    methods:{
      ...//로딩 화면 true, false 컨트롤 메소드 적용
    }
  }
</script>

 

 

src/components/util/loading.vue

<template>
  <div class="loading">
    <lottie
      :options="options"
      style="height: 100%; width: 100%"
      @animCreated="handleAnimation"
    />
  </div>
</template>
<script>
  import Lottie from "vue-lottie";
  import * as animationData from "@/json/mps_loading.json"; //json 파일경로
  export default {
    name: "LoadingView",
    components: {
      Lottie,
    },
    props: {},
    data() {
      return {
        options: { animationData: animationData },
        animationSpeed: 1,
      };
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },
    },
  };
</script>
<style lang="css" scoped>
  .loading {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.63);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }
</style>

 

여기서 loading 을 true/false 로 잡아주면 자동으로 로딩화면이 입혀진다.

 

---

 

조금 더 심화로 접근해보자면,

lottie를 이용하다보면 페이지마다 로딩화면을 다르게 처리해주는 경우가 있다. 이런 ui 고도화 작업은 id값을 상위 컴포넌트에서 받아오는 방식으로 처리했고 매우 만족스럽게 동작되었다. 또한 디자이너가 각각 다른경우 스타일을 입히는 부분에서 발생하는 문제도 이렇게  해결이 가능하다!

 

src/views/main.vue

<template>
  <div>
    <LoadingView v-if="loading" :id="'id'"/> //id값 추가
  </div>
<template>
<script>
  import LoadingView from "@/components/util/Loading.vue";
  export default {
  	components:{
     LoadingView, 
    }
    data(){
      return{
        loading:false,
      }
    }
    methods:{
      ...
    }
  }
</script>

기존코드와 다른점은 id 값을 넣어줬다는 점이다

 

 

src/components/util/loading.vue

<template>
  <div class="loading">
  //style 갑을 id값에 따라 지정해주었다.
    <lottie
      :options="options"
      :style="{ height: '100%', width: id === 'id' ? '100%' : '80px' }"
      @animCreated="handleAnimation"
    />
  </div>
</template>
<script>
  import Lottie from "vue-lottie";
  
  import * as A from "@/json/loading_a.json";
  import * as B from "@/json/loading_b.json";
  
  export default {
    name: "LoadingView",
    components: {
      Lottie,
    },
    props: ["id"], //상위에서 id값을 받아왔다.
    data() {
      return {
        options: { animationData: null },
        animationSorce: null,
        animationSpeed: 1,
      };
    },
    created() {
      //dom 생성시 id 값을 분기로 나눠 animationData = json파일을 각각 다르게 지정해주었다.
      if (this.id === "ticket") {
        this.options.animationData = A;
      } else {
        this.options.animationData = B;
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },
    },
  };
</script>
<style lang="css" scoped>
  .loading {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.63);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }
</style>