연동 코드 생성
React, Vue, Angular, Svelte 또는 Vanilla JavaScript용 기본 플레이어 코드를 생성하세요.
Code Snippet으로 현재 애니메이션에 맞는 플레이어 연동 코드를 만드세요. 여기서는 기본 재생 흐름을 다룹니다. 인터랙션 예제는 Utilities에서 별도로 제공합니다.
배포용 소스 준비
코드를 복사하기 전에 다음 소스 가운데 하나를 준비하세요.
다운로드해 프로젝트에 커밋한 파일
Workspace에서 활성화한 영구 CDN URL
승인된 Motion System 컬렉션 에셋 URL
임시 미리 보기 URL, 업로드 URL 또는 사전 서명 URL을 프로덕션에 사용하지 마세요.
스니펫 생성
애니메이션 미리 보기를 엽니다.
Code Snippet을 펼칩니다.
React, Vue, Angular, Svelte 또는 Vanilla JS를 선택합니다.
사용할 수 있는 재생 옵션을 설정합니다.
설치 명령과 코드를 복사합니다.
자동 재생, 반복 재생, 속도, 렌더러, Next.js 동작 등의 설정이 표시될 수 있습니다. 확장 프로그램은 소스와 필요한 기능에 따라 Lottie 또는 dotLottie 코드를 선택합니다.
런타임 설치
생성된 스니펫에 표시된 패키지를 사용하세요. 예:
npm install @lottiefiles/dotlottie-react런타임을 최신 상태로 유지하고 고급 API를 사용하기 전에 해당 플랫폼 문서를 확인하세요.
결과 확인
애플리케이션을 실행하고 다음 내용을 확인하세요.
개발 및 프로덕션 빌드에서 소스를 정상적으로 불러오는지
자동 재생, 반복 재생, 속도가 원하는 대로 동작하는지
플레이어의 가로·세로 크기를 명확히 지정했는지
런타임에서 필요한 애니메이션 ID, 테마, 토큰, 세그먼트, 마커 또는 상태 머신 동작이 유지되는지
고급 dotLottie 기능
생성된 코드는 테마, 상태 머신, 멀티 애니메이션 재생을 구현하는 시작점으로 사용할 수 있습니다. 지원 범위는 프레임워크별 런타임에 따라 다릅니다. 특히 현재 Angular 예제에는 테마, 상태 머신 또는 멀티 애니메이션 컨트롤이 포함되지 않습니다.
기본 코드와 인터랙션 스니펫
Code Snippet은 플레이어를 삽입하고 설정합니다. 스크롤, 뷰포트, 호버, 클릭 또는 상태 머신 예제가 필요하다면 인터랙션 스니펫 생성을 참고하세요.