728x90
300x250
SMALL
Lottie(로띠)란?
Lottie는 Airbnb에서 개발한 Json 기반 애니메이션 파일 형식으로, 웹과 모바일에서 가볍고 부드러운 애니메이션을 실행할 수 있도록 해주는 라이브러리다.
Lottie는 After Effects에서 만든 애니메이션을 JSON파일로 변환한 후, lottie-web 또는 lottie-react등의 라이브러리를 통해 쉽게 불러와 사용할 수 있다.
Lottie의 특징
- 가볍고 빠름 - JSON형식이기 때문에 GIF보다 파일 크기가 작고, 부드러운 애니메이션을 제공
- 플랫폼 호환성 - 웹뿐만 아니라 Android, ios에서도 동일하게 사용 가능
- 코드로 제어 가능 - 애니메이션을 재생, 멈춤, 속도 조절, 특정 프레임 이동 가능
- 반응형 지원 - 벡터 기반 애니메이션이므로 해상도에 영향을 받지 않음
Lottie 애니메이션 적용하는 방법
1. lottie-web을 사용한 기본 예제(HTML & JavaScript)
CDN을 이용해 웹에서 Lottie애니메이션을 적용하는 방법을 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lottie 기본 예제</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>
<style>
#lottie-container {
width: 300px;
height: 300px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="lottie-container"></div>
<script>
const animation = lottie.loadAnimation({
container: document.getElementById('lottie-container'), // 애니메이션을 삽입할 요소
renderer: 'svg', // 'svg', 'canvas', 'html' 중 선택 가능
loop: true, // 반복 재생 여부
autoplay: true, // 자동 재생 여부
path: 'https://assets10.lottiefiles.com/packages/lf20_fcfjwiyb.json' // JSON 파일 경로
});
</script>
</body>
</html>
- lottie-web 라이브러리를 CDN으로 불러옴
- lottie.loadAnimation()을 사용하여 애니메이션을 삽입
- path에 JSON 파일 경로를 넣어 애니메이션 로드
- loop: true로 설정하면 애니메이션이 무한 반복
React에서 Lottie 사용하기(lottie-react 라이브러리 활용)
React에서는 lottie-react 패키지를 설치하여 쉽게 애니메이션을 추가할 수 있다.
설치
npm install lottie-react
사용예제
import { useState } from "react";
import Lottie from "lottie-react";
import animationData from "./animation.json"; // 로컬 JSON 파일
const MyLottie = () => {
const [isPlaying, setIsPlaying] = useState(true);
return (
<div>
<Lottie
animationData={animationData}
loop={true}
autoplay={isPlaying}
style={{ width: 200, height: 200 }}
/>
<button onClick={() => setIsPlaying(!isPlaying)}>
{isPlaying ? "정지" : "재생"}
</button>
</div>
);
};
export default MyLottie;
- lottie-react를 사용해 간단하게 애니메이션 추가
- useState로 애니메이션을 재생/정지할 수 있도록 버튼 추가
무료 Lottie 애니메이션 다운로드 방법
Lottie 파일(JSON 애니메이션)은 LottieFiles(로띠파일즈)에서 다운로드할 수 있다.
LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
lottiefiles.com
사용방법
- LottieFiles에서 원하는 애니메이션 검색
- 다운로드 버튼 클릭 후 JSON파일 받기
- path 속성에 JSON파일 적용하면 끝
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 강력한 애니메이션 GSAP, 사용법과 예제 정리 (0) | 2025.03.11 |
|---|---|
| 마이크로 인터랙션 (0) | 2025.03.09 |
댓글