영리치
나의 재물운? 연애운은?
AI가 봐주는 내 사주팔자 - 운세박사
[Lottie] 로티 파일 다운로드 및 편집하여 사용하기
영리치
0
4,809
2022.01.04 19:33
로티파일은 적은 용량으로 웹/앱에서 애니메이션 사용 가능한 파일 포맷임
갓 에어비앤비에서 만듬 (에어비앤비 주식 사길)
로티 파일은 iconscout에서 다운로드 가능함
https://iconscout.com/lottie/loading-cube-4302400
위 파일을 다운로드 한다고 가정
위 파일을 json 포맷으로 다운로드 함
수정하는 방법은 아래 사이트를 통해서 수정이 가능함. (아래 사이트 에어비앤비에서 만듬)
위 사이트에 json 형태의 로티 파일을 드래그앤 드랍 하면 바로 수정 가능함
프레임 수, 속도, 크기, 색깔 등 수정 가능
리액트에서 로티 파일 추가하는 것은 다음과 같음
import animationData from '../../public/icons/loading-cube.json'; // lottie
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
return (
<CustomContainer position="relative">
<LottieAnim>
<Lottie
options={defaultOptions}
height={200}
width={200}
style={{ marginTop: '200px' }}
// isStopped={this.state.isStopped}
// isPaused={this.state.isPaused}
/>
</LottieAnim>
Comments
나의 재물운? 연애운은?
AI가 봐주는 내 사주팔자 - 운세박사
등록된 글이 없습니다.
