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

Lottie

Lottie란 무엇인가요?

로티는 에어비앤비에서 개발한 라이브러리로, 개발자가 프로젝트에서 벡터 애니메이션을 로티 JSON 파일로 쉽게 구현할 수 있도록 지원합니다. 이러한 애니메이션은 어도비 애프터 이펙트 또는 JSON 파일을 내보낼 수 있는 다른 소프트웨어를 사용하여 만들 수 있습니다.

개발자는 로티를 사용하여 복잡한 코드를 작성하지 않고도 웹, 모바일 및 데스크톱 애플리케이션에 고품질 애니메이션을 추가할 수 있습니다. 로티 애니메이션은 쉽게 크기를 늘리거나 줄일 수 있으며 파일 크기도 작아 웹에서 사용하기에 이상적입니다.

Lottie Docs

 

Lottie 설치하기

웹 프로젝트에서 로티를 사용하려면 먼저 로티 자바스크립트 라이브러리를 다운로드해야 합니다. Lottie GitHub 리포지토리를 방문하여 최신 버전의 라이브러리를 다운로드하면 됩니다.

또는 NPM을 사용하여 Lottie를 설치할 수도 있습니다:

npm install lottie-web

 

Lottie 애니메이션 만들기

로티 라이브러리를 설치했으면 lottie 함수를 임포트하고 로티 JSON 파일의 경로를 전달하여 새로운 로티 애니메이션을 만들 수 있습니다:

 

import lottie from 'lottie-web';
const animation = lottie.loadAnimation({
    container: document.getElementById(‘lottie-animation’),
    renderer: ‘svg’,
    loop: true,
    autoplay: true,
    path: ‘animation.json’,
});

이 예시에서는 새로운 로티 애니메이션을 생성하고 애니메이션 변수에 저장합니다. 다음과 같은 속성을 가진 객체를 lottie.loadAnimation() 함수에 전달합니다:

• container: 애니메이션을 포함할 DOM 요소입니다.
• 렌더러: 애니메이션의 렌더링 메서드. 이 예제에서는 SVG 렌더러를 사용하고 있습니다.
• loop: 애니메이션을 반복할지 여부입니다.
• 자동 재생: 애니메이션을 자동으로 시작할지 여부입니다.
• 경로: 로티 JSON 파일의 경로입니다.

프로젝트의 필요에 맞게 이러한 속성을 사용자 지정할 수 있습니다.

 

반응형

 

Lottie 애니메이션 사용

로티 애니메이션을 생성한 후에는 로티 라이브러리에서 제공하는 메서드와 속성을 사용하여 재생을 제어할 수 있습니다. 예를 들어 pause() 및 play() 메서드를 사용하여 애니메이션을 일시 중지하고 다시 시작할 수 있습니다:

animation.pause();
animation.play();

 

setSpeed() 메서드를 사용하여 애니메이션의 속도를 변경할 수도 있습니다:

animation.setSpeed(2);

 

또한 추가 addEventListener() 메서드를 사용하여 애니메이션에서 발생하는 이벤트를 수신할 수 있습니다:

animation.addEventListener(‘complete’, () => {
	console.log(‘Animation complete!’);
});

 

결론

Lottie는 웹 프로젝트에서 고품질 벡터 애니메이션을 쉽게 구현할 수 있는 강력한 라이브러리입니다. 이 튜토리얼에 설명된 단계를 따라 Lottie를 사용하여 웹 사이트에서 멋진 애니메이션을 만들 수 있습니다.