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