[VUE] vue lottie 사용법(Props, Methods)

1. Lottie란?

웹 및 모바일 애플리케이션에서 벡터 애니메이션을 쉽게 사용할 수 있게 해주는 라이브러리입니다. Lottie는 Adobe After Effects에서 만든 JSON 파일을 로드하여 애니메이션을 렌더링합니다.

 

2. lottie 사용방법?

 

-라이브러리 설치

 

Vue 3 + Typescript Support

npm install lottie-web-vue

OR 

yarn add lottie-web-vue

 

Vue 2 (v2 사용시 1.2.1로 설치하세요.)

npm install lottie-web-vue@1.2.1

 

 

- Vue 2.x

import Vue from 'vue'
import LottieAnimation from 'lottie-web-vue'
 
Vue.use(LottieAnimation); // add lottie-animation to your global scope
 
new Vue({
  render: h => h(App)
}).$mount('#app')

 

- Vue 3

<script setup lang="ts">
  import { onMounted, ref } from "vue"
  import { LottieAnimation } from "lottie-web-vue"
  import WatermelonJSON from "./assets/watermelon.json"

  let anim = ref()

  onMounted(() => {
    setTimeout(() => {
      console.log(anim.value.goToAndPlay(150, true))
      anim.value
    }, 500)
  })
</script>
<template>
  <LottieAnimation 
    :animation-data="WatermelonJSON"
    :auto-play="true"
    :loop="true"
    :speed="1"
    ref="anim" />
</template>

 

참고사이트 : https://www.npmjs.com/package/lottie-web-vue?activeTab=readme

lottie-web-vue

 

3. Props, Methods 사용법

 

Props

<script setup lang="ts">
  import { onMounted, ref } from "vue"
  import { LottieAnimation } from "lottie-web-vue"
  import WatermelonJSON from "./assets/watermelon.json"

  let anim = ref()

  onMounted(() => {
    setTimeout(() => {
      console.log(anim.value.goToAndPlay(150, true))
      anim.value
    }, 500)
  })
</script>
<template>
  <LottieAnimation 
    :animation-data="WatermelonJSON"
    :auto-play="true"
    :loop="true"
    :speed="1"
    ref="anim" />
</template>

 

animationData

형식: 객체 (Object)
필수: true
애니메이션 데이터를 가져와야 합니다. require 문이나 import 문을 사용하여 .json 파일을 가져옵니다. 예를 들어, require('@/assets/animation.json')와 같이 사용합니다. (프로젝트의 src/assets 폴더에 애니메이션을 a.json 파일로 저장하세요)

loop
형식: [Boolean, Number]
필수: false
기본값: false

true: 애니메이션이 계속해서 반복 재생됩니다.
false: 애니메이션은 한 번만 재생됩니다.
[number, 예: 3]: 애니메이션이 N 번 재생된 후 정지됩니다. (정수를 전달하세요)

autoPlay

형식: 불리언 (Boolean)
필수: false
기본값: true
true: 애니메이션이 로딩이 완료되자마자 재생됩니다.
false: this.$refs.lottieAnimation.play()를 호출할 때만 애니메이션이 재생됩니다. (아래의 재생 컨트롤 참조)

speed

형식: 숫자 (Number)
필수: false
기본값: 1
이 속성은 애니메이션 재생 속도를 조절합니다.

 

Methods

<script setup>
  import { LottieAnimation } from "lottie-web-vue"
  import WatermelonJSON from "./assets/watermelon.json"
</script>
<template>
  <LottieAnimation
    ref="anim"
    :animationData="animation"
  />
</template>

 

구성 요소(상위 보기)에 ref ID가 있으면 아래 방법처럼 사용 가능합니다.

... // in your parent .vue file
<script setup lang="ts">
  const buttonClicked = () => {
    this.$refs.anim.play() // .play, .pause, .stop available
  }
</script>

play: 애니메이션을 재생합니다.

this.$refs.anim.play()

stop: 애니메이션을 정지하고 첫 프레임으로 되돌립니다.

this.$refs.anim.pause()

pause: 애니메이션을 일시 중지합니다.

this.$refs.anim.stop()

setSpeed(speed: number): 애니메이션의 재생 속도를 조절합니다.

this.$refs.anim.setSpeed(2)

goToAndPlay(value: number, isFrame: boolean): 특정 프레임 또는 타임라인 위치로 이동하고 애니메이션을 재생합니다. 

this.$refs.anim.goToAndPlay(10, true)

goToAndStop(value: number, isFrame: boolean): 특정 프레임 또는 타임라인 위치로 이동하고 애니메이션을 일시 중지합니다. 

this.$refs.anim. goToAndStop (10, true)

 

setDirection (-1, 1): 애니메이션 재생 방향을 제어하는 데 사용됩니다. -1 역방향, 1 정방향

this.$refs.anim.setDirection(-1)

 

getDuration: 메서드는 현재 애니메이션의 지속 시간을 검색하는 데 사용됩니다. t

this.$refs.anim.getDuration(true)

 

destroy: Lottie 인스턴스를 제거하고 리소스를 해제합니다.

this.$refs.anim.destroy()

 

 

-참고 사용 트렌드 (2024.1월기준)

lottie-player-vue vs lottie-vuejs vs lottie-web vs vue-lottie

 

출처 : https://npmtrends.com/lottie-player-vue-vs-lottie-vuejs-vs-lottie-web-vs-vue-lottie

 

결론 : 최근까지 업데이트를 지원한 lottie-web을 사용하는걸 권장합니다. 

 

 

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.