Lottie는 JSON 기반의 애니메이션 파일을 웹이나 모바일에 쉽게 통합할 수 있는 라이브러리입니다. 이 중 LottiePlayer는 웹에서 Lottie 애니메이션을 간편하게 재생할 수 있는 웹 컴포넌트입니다. 이번 포스팅에서는 CDN 방식으로 LottiePlayer를 사용하는 방법을 소개하겠습니다.
1. LottiePlayer란?
LottiePlayer는 Lottie 애니메이션을 HTML 태그만으로 손쉽게 삽입하고 제어할 수 있게 해주는 도구입니다. LottiePlayer는 다양한 속성으로 애니메이션의 반복 재생, 자동 재생 등의 설정을 손쉽게 할 수 있습니다.
2. CDN으로 LottiePlayer 사용하기
LottiePlayer를 사용하려면 CDN을 통해 라이브러리를 불러오고, HTML에 태그를 추가하여 애니메이션을 삽입하면 됩니다. 파일로 첨부하는 방법도 있지만, 이번 포스팅에서는 CDN 기준으로 작성 했습니다.
- CDN 링크 삽입
HTML 파일의 <head> 태그에 아래와 같이 LottiePlayer의 CDN을 추가합니다.
<head>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>- LottiePlayer 태그 사용하기
CDN을 추가한 후 <lottie-player> 태그를 이용하여 Lottie 애니메이션을 삽입합니다. 아래는 JSON 파일 경로를 지정하여 Lottie 애니메이션을 재생하는 기본 예제입니다.
<lottie-player
src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay>
</lottie-player>위 코드는 Lottie 애니메이션을 불러와 자동 재생하고, 반복 재생이 설정된 기본 예제입니다.
3. 주요 속성 설명
<lottie-player> 태그에서 사용할 수 있는 주요 속성들은 다음과 같습니다:
- src: 애니메이션 JSON 파일의 URL.
- background: 애니메이션 배경색 (기본값: 투명).
- speed: 애니메이션 재생 속도 (기본값: 1).
- style: CSS로 크기, 배치를 지정할 수 있습니다.
- loop: 애니메이션을 무한 반복할지 여부를 설정합니다.
- autoplay: 페이지 로드 시 애니메이션을 자동 재생할지 여부.
4. JavaScript로 애니메이션 제어하기
LottiePlayer는 JavaScript를 통해 애니메이션을 재생하거나 일시 정지할 수 있습니다. 다음은 JavaScript로 애니메이션을 제어하는 예시입니다.
<lottie-player id="myLottie"
src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay>
</lottie-player>
<button onclick="document.getElementById('myLottie').pause()">Pause</button>
<button onclick="document.getElementById('myLottie').play()">Play</button>위 코드에서는 버튼 클릭 시 애니메이션을 pause 또는 play로 제어할 수 있습니다.
See the Pen lottiePlayer by park drake (@DrakeP) on CodePen.
5. 추가 기능 및 옵션
LottiePlayer는 애니메이션을 더 세부적으로 제어할 수 있는 다양한 기능을 제공합니다.
- controls: 재생/정지 등의 컨트롤 UI를 추가할 수 있습니다.
<lottie-player
src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
controls>
</lottie-player>- events: 애니메이션의 상태를 추적하는 이벤트를 사용할 수 있습니다. 예를 들어, 애니메이션이 완료되었을 때의 이벤트를 처리할 수 있습니다.
const player = document.getElementById('myLottie');
player.addEventListener('complete', () => {
console.log('Animation completed!');
});
LottiePlayer는 간단한 태그를 통해 Lottie 애니메이션을 웹 페이지에 손쉽게 통합할 수 있는 도구입니다. CDN을 사용하여 빠르게 적용할 수 있고, 다양한 속성과 JavaScript API를 통해 애니메이션을 세부적으로 제어할 수 있습니다.
'HTML' 카테고리의 다른 글
| input type file에서 카메라 - 파일 작업 선택 속성 추가 (0) | 2023.10.05 |
|---|---|
| 사파리에서 디바이스별로 확인하는 방법 (응답형 디자인 모드) (0) | 2022.12.26 |
| [웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값! (0) | 2022.05.10 |
| [html] tbody 여러 번 사용할 수 있다 (0) | 2021.06.16 |
| a태그로 구글 메일 보내기 바로 링크 (ft.Gmail) (2) | 2021.01.18 |
댓글