Airbnb Lottie-web 사용하기: 웹 애니메이션의 새로운 지평을 열다
Lottie-web은 Airbnb에서 개발한 오픈 소스 프로젝트로, After Effects에서 제작된 애니메이션을 웹, Android, iOS, React Native 등 다양한 플랫폼에서 손쉽게 재생할 수 있도록 지원합니다.
왜 Lottie-web을 사용해야 할까요?
- 가볍고 빠른 성능: 기존 GIF 이미지나 동영상보다 훨씬 작은 용량으로 높은 품질의 애니메이션을 구현하여 웹 페이지 로딩 속도를 향상시킵니다.
- 커스터마이징: JSON 파일을 직접 수정하여 애니메이션의 속도, 색상, 크기 등을 자유롭게 변경할 수 있습니다.
- 다양한 플랫폼 지원: 웹뿐만 아니라 모바일 앱에서도 동일한 애니메이션을 사용할 수 있어 개발 효율성을 높입니다.
- 오픈 소스: 무료로 사용할 수 있으며, 활발한 커뮤니티를 통해 지속적인 개발과 지원을 받을 수 있습니다.
설치하기
# with npm
npm install lottie-web
# with bower
bower install bodymovinLottie-web 다양한 활용법
Lottie-web을 활용하여 다양한 애니메이션을 구현하는 방법을 코드 예시와 함께 자세히 알아보겠습니다.
1. 기본 설정 및 Lottie 파일 불러오기
<!DOCTYPE html>
<html>
<head>
<title>Lottie-web 예시</title>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
<lottie-player id="animationContainer" src="data.json" speed="1" loop autoplay></lottie-player>
<script>
// JavaScript를 이용한 추가 설정 (선택 사항)
var animationContainer = document.getElementById('animationContainer');
var anim = lottie.loadAnimation({
container: animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
});
</script>
</body>
</html>- https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js: Lottie 라이브러리를 불러오는 스크립트입니다.
- <lottie-player> 태그: Lottie 애니메이션을 표시하는 태그이며, src 속성에 JSON 파일의 경로를 지정합니다.
- JavaScript 코드: lottie.loadAnimation() 함수를 사용하여 애니메이션을 로드하고 추가적인 설정을 할 수 있습니다.
2. 로딩 애니메이션
<div id="loading-container">
<lottie-player id="loading-animation" src="loading.json" loop autoplay></lottie-player>
<p>로딩 중입니다...</p>
</div>- 로딩 화면이 나타날 때 loading-container의 display 속성을 block으로 설정하고, 로딩이 완료되면 none으로 설정하여 숨깁니다.
3. 버튼 클릭 시 애니메이션 재생
<button onclick="startAnimation()">애니메이션 시작</button>
<lottie-player id="button-animation" src="button.json" loop="false"></lottie-player>
<script>
function startAnimation() {
var anim = lottie.loadAnimation({
container: document.getElementById('button-animation'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'button.json'
});
}
</script>- 버튼 클릭 시 startAnimation() 함수가 호출되어 애니메이션이 재생됩니다.
4. 스크롤 시 애니메이션 트리거
window.addEventListener('scroll', function() {
var animationContainer = document.getElementById('scroll-animation');
var anim = lottie.loadAnimation({
container: animationContainer,
renderer: 'svg',
loop: false,
autoplay: false,
path: 'scroll.json'
});
if (window.scrollY > 500) {
anim.play();
}
});- 스크롤 위치에 따라 애니메이션을 재생하도록 설정합니다.
5. 사용자 상호작용에 따른 애니메이션 변경
var animationContainer = document.getElementById('interactive-animation');
var anim = lottie.loadAnimation({
container: animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'interactive.json'
});
animationContainer.addEventListener('mouseover', function() {
anim.setSpeed(2);
});
animationContainer.addEventListener('mouseout', function() {
anim.setSpeed(1);
});
- 마우스 오버 시 애니메이션 속도를 변경하여 사용자와 상호작용하는 효과를 구현합니다.
추가 옵션
- speed: 애니메이션 재생 속도 (1이 기본)
- loop: 반복 재생 여부 (true: 반복, false: 한 번만 재생)
- autoplay: 자동 재생 여부 (true: 자동 재생, false: 클릭 시 재생)
- renderer: 렌더링 방식 (svg, canvas)
- events: 애니메이션 이벤트 처리 (complete, loopComplete 등)
https://codepen.io/airnan/project/editor/ZeNONO
Simple Bodymovin Demo
...
codepen.io
https://codepen.io/collection/nVYWZR/?cursor=eyJwYWdlIjo1fQ==
bodymovin - a Collection by kittons on CodePen
animations exported from after effects to svg + js or canvas + js
codepen.io
728x90
'웹개발 > vuejs' 카테고리의 다른 글
| [Vue] pinia 직관적인 Vue.js 상태 관리 라이브러리 (0) | 2024.08.07 |
|---|---|
| [Vue] nextTick 사용하기 (0) | 2024.08.01 |
| [Vue] Vue.js 프로젝트에 효율적인 개발을 위한 필수 도구 (0) | 2024.08.01 |
| [Vue] vue3-lottie 사용하기 (0) | 2024.08.01 |
| [Vue] Vue3에서 onBeforeMount() 훅 사용 가이드 (0) | 2024.07.30 |