Lottie

Lottie 컴포넌트를 사용해서 Lottie 애니메이션을 렌더링할 수 있어요. 이 컴포넌트로 Lottie JSON 파일을 로드하고 애니메이션을 재생해요. 특징으로는 레이아웃 시프팅을 방지하려면 높이를 필수로 지정해야 해요.

시그니처

function Lottie({ width, maxWidth, height, src, autoPlay, speed, style, onAnimationFailure, ...props }: Props): import("react/jsx-runtime").JSX.Element;

파라미터

• propsobject
  

  컴포넌트에 전달되는 props 객체예요. lottie-react-native 라이브러리의 LottieView 컴포넌트에서 지원하는 속성들을 사용할 수 있어요.

  • props.widthnumber | '100%'
    

    Lottie 애니메이션의 너비예요.

  • props.height필수 · number | '100%'
    

    Lottie 애니메이션의 높이예요. 레이아웃 시프팅 방지를 위해 필수로 지정해야 해요.

  • props.src필수 · string
    

    Lottie JSON 파일의 URL이에요. 안정성 검사를 위해서 LottieView의 source를 직접 사용하지 않아요. src를 사용해 주세요.

  • props.maxWidthnumber
    

    Lottie 애니메이션의 최대 너비예요.

  • props.autoPlayboolean · true
    

    컴포넌트가 마운트되면 자동으로 애니메이션을 재생할지 여부예요.

  • props.speednumber · 1
    

    애니메이션의 재생 속도예요.

반환 값

• ReactElement
  

  lottie-react-native 라이브러리의 LottieView 엘리먼트를 반환해요.

예제

Lottie 애니메이션 렌더링하기

다음 예시는 Lottie 애니메이션을 렌더링하고, 애니메이션 로드 실패 시 콘솔에 에러 메시지를 출력하는 방법을 보여줘요.

import { Lottie } from '@react-native-bedrock/core';

export function LottieExample() {
 return (
   <Lottie
     height={100}
     src="https://my-lottie-animation-url.com"
     autoPlay={true}
     loop={false}
     onAnimationFailure={() => {
       console.log('Animation Failed');
     }}
     onAnimationFinish={() => {
       console.log('Animation Finished');
     }}
   />
 );