[Vue] vue3-lottie 사용하기

Vue3-Lottie는 Vue 3 프로젝트에서 Lottie 애니메이션을 쉽게 사용할 수 있도록 도와주는 컴포넌트 라이브러리입니다. Lottie는 Adobe After Effects에서 제작된 애니메이션을 JSON 형식으로 변환하여 웹에서 가볍고 빠르게 재생할 수 있도록 해주는 기술입니다. Vue3-Lottie는 이러한 Lottie 애니메이션을 Vue 3 컴포넌트로 감싸, 개발자가 Vue 컴포넌트처럼 간편하게 애니메이션을 관리하고 제어할 수 있도록 지원합니다.

왜 Vue3-Lottie를 사용해야 할까요?

• 간편한 통합: Vue 3 프로젝트에 Lottie 애니메이션을 손쉽게 추가하고 관리할 수 있습니다.
• 다양한 기능 지원: Lottie 애니메이션의 모든 기능을 지원하며, 추가적인 옵션을 통해 애니메이션을 커스터마이징할 수 있습니다.
• TypeScript 지원: TypeScript 프로젝트에서도 안전하게 사용할 수 있습니다.
• 확장된 API: 기본 Lottie 기능 외에 추가적인 애니메이션 옵션과 메소드를 제공합니다.
• Vue 3 Composition API 지원: Vue 3의 Composition API를 활용하여 더욱 유연하고 재사용 가능한 코드를 작성할 수 있습니다.

주요 기능

• Lottie 파일 재생: JSON 형식의 Lottie 파일을 불러와 애니메이션을 재생합니다.
• 애니메이션 제어: 재생, 일시 정지, 되감기, 속도 조절, 반복 설정 등 다양한 제어 기능을 제공합니다.
• 이벤트 처리: 애니메이션 시작, 종료, 루프 등의 이벤트를 감지하고 처리할 수 있습니다.
• 반응형 디자인: 화면 크기에 따라 애니메이션의 크기와 위치를 자동으로 조절할 수 있습니다.
• 커스터마이징: 애니메이션의 색상, 크기, 속도 등을 자유롭게 변경하여 맞춤형 애니메이션을 만들 수 있습니다.

사용 예시

<template>
  <lottie :options="options" :speed="0.5" @animationFinished="handleAnimationFinished" />
</template>

<script>
import Lottie from 'vue3-lottie';

export default {
  components: {
    Lottie
  },
  data() {
    return {
      options: {
        animationData: require('./your-animation.json')
      }
    };
  },
  methods: {
    handleAnimationFinished() {
      // 애니메이션 종료 시 실행될 코드
    }
  }
};
</script>

• options: Lottie 애니메이션의 설정을 담은 객체입니다. animationData 속성에 Lottie 파일의 경로를 지정합니다.
• speed: 애니메이션 재생 속도를 조절합니다.
• @animationFinished: 애니메이션이 종료될 때 호출되는 이벤트 핸들러입니다.

Vue3-Lottie의 장점

• 간편한 학습: Vue 개발자라면 누구나 쉽게 사용할 수 있습니다.
• 높은 성능: Lottie의 경량화된 특성을 그대로 유지하여 웹 페이지의 성능 저하를 최소화합니다.
• 다양한 커뮤니티 지원: 활발한 커뮤니티를 통해 다양한 정보와 지원을 받을 수 있습니다.

Vue 3 Composition API를 활용한 Vue3-Lottie 예시

Vue3-Lottie를 Vue 3 Composition API 방식으로 사용하면 더욱 유연하고 재사용 가능한 코드를 작성할 수 있습니다. Composition API를 활용하여 Lottie 애니메이션을 관리하는 다양한 기능을 분리하고, 필요에 따라 재사용할 수 있습니다.

기본 예시

<template>
  <div ref="lottieRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Lottie from 'lottie-web';

const lottieRef = ref(null);
const animation = ref(null);

onMounted(() => {
  animation.value = Lottie.loadAnimation({
    container: lottieRef.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: require('./your-animation.json')
  });
});

onUnmounted(() => {
  animation.value.destroy();
});
</script>

• ref: lottieRef를 사용하여 Lottie 애니메이션이 렌더링될 DOM 요소를 참조합니다.
• onMounted: 컴포넌트가 마운트될 때 Lottie 애니메이션을 초기화합니다.
• onUnmounted: 컴포넌트가 언마운트될 때 애니메이션을 해제합니다.

Composition API를 활용한 기능 분리

import { ref, onMounted, onUnmounted } from 'vue';
import Lottie from 'lottie-web';

export function useLottie(animationData) {
  const lottieRef = ref(null);
  const animation = ref(null);

  onMounted(() => {
    animation.value = Lottie.loadAnimation({
      container: lottieRef.value,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData
    });
  });

  onUnmounted(() => {
    animation.value?.destroy();
  });

  return {
    lottieRef,
    animation
  };
}

위 코드는 Lottie 애니메이션을 초기화하고 관리하는 로직을 useLottie라는 커스텀 훅으로 분리했습니다. 이렇게 하면 다른 컴포넌트에서도 이 훅을 재사용하여 Lottie 애니메이션을 쉽게 관리할 수 있습니다.

다양한 기능 구현하기

• 애니메이션 제어:

  animation.value.play(); // 애니메이션 재생
  animation.value.pause(); // 애니메이션 일시 정지
  animation.value.goToAndStop(frame); // 특정 프레임으로 이동

• 속도 조절:

  animation.value.setSpeed(0.5); // 재생 속도를 0.5배로 설정

• 반복 설정:

  animation.value.loop = false; // 반복 재생 설정

• 이벤트 처리:

  animation.value.addEventListener('complete', () => {
    // 애니메이션 종료 시 실행될 코드
  });

추가적인 기능 구현하기

• 반응형 디자인: 화면 크기에 따라 애니메이션의 크기와 위치를 조절하기 위해 resize 이벤트를 활용하고, animation.value.setParams 메소드를 사용하여 애니메이션 설정을 변경할 수 있습니다.
• 커스텀 이벤트: dispatch 메소드를 사용하여 커스텀 이벤트를 발생시키고, 다른 컴포넌트에서 이벤트를 수신하여 애니메이션을 제어할 수 있습니다.
• 지연 로딩: Suspense 컴포넌트와 함께 사용하여 Lottie 파일을 지연 로딩할 수 있습니다.

주의 사항

• Lottie 파일: Lottie 파일은 After Effects에서 Bodymovin 플러그인을 사용하여 생성해야 합니다.
• JSON 파일 경로: require 문을 사용하여 Lottie 파일의 경로를 정확하게 지정해야 합니다.
• TypeScript: TypeScript 프로젝트에서는 @types/lottie-web 타입 정의를 설치해야 합니다.

 

Vue3-Lottie 속성 (Props) 설명

필수 속성 (Required Props):

• animationData (Object): (필수) Lottie 애니메이션 데이터를 JSON 객체 형태로 입력합니다. After Effects에서 만든 애니메이션을 Bodymovin 플러그인을 이용하여 JSON으로 내보낸 파일의 내용을 이 속성에 넣습니다.
• animationLink (String, optional): (선택적) Lottie 애니메이션 데이터를 가져올 URL 링크를 입력합니다. 예시: lottiefiles.com에서 제공하는 Lottie 애니메이션 URL

일반 속성 (General Props):

• width (Number or String, default: "100%"): Lottie 애니메이션 컨테이너의 너비를 설정합니다. 숫자는 픽셀 값을 나타내고, 문자열은 CSS width 값을 사용할 수 있습니다.
• height (Number or String, default: "100%"): Lottie 애니메이션 컨테이너의 높이를 설정합니다. 숫자는 픽셀 값을 나타내고, 문자열은 CSS height 값을 사용할 수 있습니다.
• speed (Number, default: 1): 애니메이션 재생 속도를 조절합니다. 1은 기본 속도이며, 0.5는 절반 속도, 2는 두 배 속도입니다.
• direction (String, default: "forward"): 애니메이션 재생 방향을 설정합니다. "forward"는 앞으로, "reverse"는 뒤로 재생됩니다.
• loop (Number or Boolean, default: true): 애니메이션 반복 횟수를 설정합니다. 숫자로 반복 횟수를 지정하거나, true를 설정하면 무한 반복됩니다.
• autoPlay (Boolean, default: true): 컴포넌트 로드 시 애니메이션을 자동으로 재생할지 여부를 설정합니다.
• delay (Number, default: 0): 애니메이션 재생을 지연할 시간(밀리초)을 설정합니다.

이벤트 제어 속성 (Event Control Props):

• pauseAnimation (Boolean, default: false): 애니메이션을 일시 정지할 수 있는 reactive 변수를 넘겨줍니다. 변수의 값이 true가 되면 애니메이션이 일시 정지되고, false가 되면 다시 재생됩니다.
• pauseOnHover (Boolean, default: false): 마우스를 컴포넌트 위에 올려놓으면 애니메이션을 일시 정지할지 여부를 설정합니다.
• playOnHover (Boolean, default: false): 마우스를 컴포넌트 위에 올려놓으면 애니메이션을 재생할지 여부를 설정합니다.

스타일 속성 (Style Props):

• backgroundColor (String, default: "transparent"): Lottie 애니메이션 컨테이너의 배경 색상을 설정합니다.
• noMargin (Boolean, default: false): Lottie 애니메이션이 컨테이너 안에서 자동으로 가운데 정렬되는 것을 방지합니다. 이 옵션을 사용하면 męskie UI에서 애니메이션의 위치를 더 세밀하게 조정할 수 있습니다.

고급 속성 (Advanced Props):

• scale (Number, default: 1): 애니메이션을 스케일링합니다. 숫자 1은 기본 크기이며, 2는 두 배 크기, 0.5는 절반 크기입니다. (주의: 스케일링을 너무 많이 사용하면 ぼやけ (ぼやけ - bo yake - 흐려짐) 현상이 발생할 수 있습니다.)
• assetsPath (String, default: ""): Lottie 애니메이션에서 사용하는 이미지 자산에 대한 URL 경로를 설정합니다.
• renderer (String, default: "svg"): 렌더러를 설정합니다. 대부분의 경우에는 굳이 건드릴 필요가 없습니다.
• rendererSettings (Object, optional): 이미 존재하는 canvas를 사용하여 애니메이션을 그리기 위한 옵션입니다. 대부분의 경우에는 필요하지 않습니다.