【vue】vue에서 로티 사용법

일반적으로 상대적으로 큰 애니메이션 gif 이미지는 단점이 많은데, 첫째로 크기가 너무 크고, 둘째, 모서리가 거칠고 보기에 좋지 않기 때문에 사용하실 경우에는 로티를 사용하시는 것이 좋습니다.

1-설치

npm install lottie-web

2 - 사용해야 하는 페이지에 소개해주세요

	import lottie from 'lottie-web'

3-Write 로티 기능

// lottie动画渲染
			    intLottie(domId, path, loop = false) {
			      // 渲染主图按钮动画
			      let lottieBox = lottie.loadAnimation({
			        container: document.getElementById(domId), // 包含动画的dom元素
			        renderer: 'svg', // 渲染出来的是什么格式
			        loop: loop, // 循环播放
			        autoplay: true, // 自动播放
			        path: path
			      });
			      lottieBox['addEventListener']('complete', () => {
					  console.log('完成')
			      
			      });
			    },

그런 다음 필요할 때 직접 전화하세요.

첨부한 공식 홈페이지 링크입니다

로티 문서