Lottie 적용하기

방법 1

참조 : https://blog.jiniworld.me/61

[Front-end] Web환경에서 Lottie json을 이용하여 움직이는 이미지 이용하기

 

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

 

lottie player 를 직접 최상단 html 파일 내 script 로 적용

 

📌 cafe24 스마트 디자인편집의 경우 lottie 를 사용하고자 하는 html 파일 내 스크립트로 삽입하면 사용 가능하다.

 

 

단, vue3 + qausar 로 이루어진 프로젝트에서의 문제는

runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: lottie-player
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Loading value=0 > 
  at <QPage key=4 class="bg-white" > 
  at <Upload onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <QPageContainer class="flex-grow flex" > 
  at <QLayout view="lHh Lpr lFf" class="flex flex-col" > 
  at <LogoLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <App>

 

=> runtime error 발생

---

 

방법 2

참조 : https://ton-ton.tistory.com/103

[Lottie] SVG를 Web에 구현해보자

lottie-web 라이브러리 설치 후 적용하기 ✨ 여기서 또 두 가지 방법으로 사용이 가능하다.

💡 첫 번째는 lottie 용 컴포넌트를 만들기
💡 두 번째는 라이브러리를 import 해서 lottie animation 을 변수에 담아 사용하기

 

 

🤔 vue warn 이 뜨는 이유에 대한 고찰

애초에 렌더링도 안 됨

1. lottie.json 을 root path 에 두어야 하는지?
   • 아님. public 폴더에 두고 build 후 결과물에 남아있는지를 체크해야한다.

1. lottie-web 라이브러리 컴포넌트를 따로 만들어서 사용하는 게 좋을지?
   • 해당 lottie 파일이 재사용 될 때 다시 고려하면 좋을 듯 → 결과적으로는 component 생성 후 사용하는 편이 재사용성 측면이나 파일 인식 측면에서 더 유용한 것 같다.

 

LottiePlayer.vue

<template>
    <div ref="lottieContainer"></div>
  </template>
  
  <script setup lang='ts'>
  import lottie from 'lottie-web';
  import { ref, onMounted } from 'vue';

  const lottieContainer = ref<HTMLDivElement>();
  const Lottie = lottie;

  const props = defineProps({
        animationData: {
        type: Object
        }
    })

    onMounted(() => {
        const lottie = Lottie.loadAnimation({
          container: lottieContainer.value,
          renderer: 'svg',
          loop: true, // 애니메이션을 반복하려면 true로 설정
          autoplay: true, // 페이지 로드 후 자동 재생하려면 true로 설정
          animationData: props.animationData,
        });
        // lottie.setSpeed(2); // 애니메이션 재생 속도 설정
    });

  </script>

 

 

Loading.vue

<template>
    <div class="wrapper text-center" ref="container">
        <!-- <lottie-player src="/public/images/loading.json" >
        </lottie-player> -->
        <lottie-player :animationData="animationData" style="width: 11%; height: 8%; margin: 0 auto;" speed="2.5"></lottie-player>

        <!-- <p style="position: relative; top: -30px;"> {{ progressValue }}</p> -->
        <p>
            디자인을 생성 중이에요 <br>
            잠시만 기다려주세요
        </p>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import LottiePlayer from './LottiePlayer.vue';
import * as Api from 'src/api';
import animationData from '../../../public/images/loading.json';

const props = defineProps({
  value: {
    default: 0,
    type: Number
  }
})

const progressValue = ref(props.value)

watch(props, () => {
    progressValue.value = props.value;
})


</script>
<style scoped lang="scss">
.wrapper {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 45%;
    transform: translate(0, -50%);

    p {
      color: var(--permissible-opacity-black-op-40, rgba(0, 0, 0, 0.40));
      text-align: center;
      font-family: 'Pretendard-Medium';
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 24px; /* 150% */
      letter-spacing: 0.25px;
    }
}

</style>

 

loading 컴포넌트 내에서 고민한 흔적도 같이... ㅎㅎ