멀티 애니메이션 파일 사용

멀티 애니메이션 dotLottie 파일 안의 애니메이션을 확인하고 선택하거나 이름을 바꾸고 추가하세요.

.lottie 파일 하나에는 쉽게 바뀌지 않는 ID로 구분된 여러 애니메이션을 담을 수 있습니다. 런타임 코드에서 애니메이션을 선택하거나 새 번들을 만들기 전에 미리 보기에서 구성을 확인하세요.

번들 안의 애니메이션 확인

.lottie 미리 보기를 열고 애니메이션 썸네일이나 목록에서 활성 애니메이션을 전환합니다. 매니페스트에서 첫 번째로 지정했거나 기본값으로 설정한 애니메이션이 처음 표시됩니다.

VS Code에서 선택한 멀티 애니메이션 dotLottie 파일
VS Code에서 선택한 멀티 애니메이션 dotLottie 파일

각 하위 애니메이션에서 다음 내용을 확인하세요.

  • 애니메이션 ID

  • 크기와 프레임 범위

  • 마커와 세그먼트

  • 테마, 모션 토큰 또는 상태 머신 의존성

애니메이션 ID 변경

매니페스트에 저장된 애니메이션 ID는 번들 인터페이스에서 바꿀 수 있습니다. idle, loading, success, error처럼 개발자가 이해하기 쉽고 오래 유지할 수 있는 짧은 이름을 사용하세요.

ID를 바꾸면 이전 값을 참조하는 코드가 동작하지 않을 수 있습니다. 런타임 호출과 생성된 타입을 함께 업데이트하세요.

애니메이션 추가

미리 보기의 추가 컨트롤로 현재 번들에 다른 Lottie 애니메이션을 더할 수 있습니다. 업데이트된 번들이 열리면 ID와 활성 애니메이션을 다시 확인하세요.

순서, 메타데이터, 초기 애니메이션을 명확히 정해 여러 파일을 하나로 만들려면 dotLottie Composer를 사용하세요.

코드에서 애니메이션 하나 사용

.lottie 파일을 소스로 유지하고 대상 dotLottie 런타임에서 애니메이션 ID를 선택하세요. 그러면 다른 상태나 컴포넌트에서 사용할 번들의 나머지 애니메이션도 보존됩니다.

번들 기능에는 JSON을 사용하지 마세요

Lottie JSON은 애니메이션 하나만 나타냅니다. .lottie 번들을 JSON으로 내보내면 활성 애니메이션만 남고 멀티 애니메이션, 테마, 모션 토큰, 상태 머신 같은 dotLottie 전용 기능은 사라집니다. 데이터가 손실되는 JSON 다운로드나 URL 작업을 선택하면 확장 프로그램에서 경고를 표시합니다.

변경 내용 저장

미리 보기에서 바꾼 내용은 .lottie 파일을 다운로드하거나 저장해야 반영됩니다. 코드에 연결하기 전에 저장한 파일을 다시 열어 매니페스트를 확인하세요.

관련 문서

마지막 업데이트: 2026년 9월 11일 오후 12:08Common.editThisPage