React.js Lottie적용

Soo00oo·2022년 12월 23일
0

React

목록 보기
3/5
하이브리드 앱 작업시,
디자이너에게 Splash페이지 애니메이션 적용을 요청받았다.
splash에 animation적용은 처음이라,
css애니메이션으로 통통 튀는 페이지 만들어 전달했는데,
앱개발자분이 css로 작업하면 안먹는다고...(원래안되는것일까..?)
gif 파일같은걸 달라고 하셨다.......
그러던중 전에 로딩페이지를 Lottie로 작업했던 기억이 나서..
디자이너 분께 lottie파일을 받아 적용해보았다.
Gif와의 비교
gif의 경우, 비트맵 방식으로 이루어져 있다.
픽셀 하나하나마다 색상이 칠해져 있기 때문에 용량이 크다.
또한 확대할 경우 화질 저하가 발생한다.
반면, lottie는 ai, svg처럼 벡터 방식으로 이루어져 있기 때문에
용량이 작고(단, 엄청 복잡해지면 오히려 비트맵 방식보다 용량이 커질 수 있음.),
점과 점을 연결해 수학적 원리로 그려내는 방식이라 아무리 확대해도 화질 저하가 없다.

1. Lottie 선택하기

애니메이션이 Lottie형식(.json)으로 되어있는지 확인하기.
테스트는 lottiefiles(무료 애니메이션파일) 다운받아서 사용해보았다.

2. 라이브러리 설치하기

  • npm을 이용하여 react-lottie 라이브러리를 설치한다.

    npm install --save react-lottie

3. Lottie적용

폴더 : src> lotties> .json 적용

(App.js)

import React, { useState, useEffect } from 'react';
import "./App.css";
import Lottie from "react-lottie";
import animationSplash from "./lotties/tree_splash.json";
function App() {

	let [splash, setSplash] = useState(true);
	useEffect(()=>{
		setTimeout(()=>{
			setSplash(false)
		}, 3000)
	}, [])
	
	return (
		<>
			{
				splash === true ? <Wrapper /> : null
			}	  
		</>
	);
	
}
function Wrapper() {
🔈🔉🔊📢📣 중요!!
	
    const defaultOptions = {
		loop: true,
		autoplay: true,
		animationData: animationSplash,
		rendererSettings: {
			preserveAspectRatio: "xMidYMid slice"
		}
	};	
	return (
		<div class="wrapper">
			<Lottie options={defaultOptions} />
		</div>
	)
    
중요!!🚓🚕🛺🚙
}
export default App;

profile
UI Developer heesoo

0개의 댓글