프로젝트 소개

dotLottie Web은 웹 애플리케이션에 Lottie(.json) 및 dotLottie(.lottie) 애니메이션을 임베드하기 위한 공식 LottieFiles 플레이어입니다. 이 플레이어는 dotlottie-rs의 Rust + WASM 코어를 사용하며, 벡터 렌더러로 ThorVG를 활용합니다. Canvas2D 소프트웨어 렌더링, WebGL2 및 실험적인 WebGPU 백엔드를 지원하며, 동일한 DotLottie 클래스와 API를 유지하면서 서브패스 임포트를 통해 백엔드를 교체할 수 있습니다. 또한 서버 사이드 렌더링, 썸네일 생성 또는 프레임 추출을 위한 Node.js 18+ 이소모픽(isomorphic) 지원에 대한 문서도 제공합니다. 이 플레이어는 색상, 스칼라, 위치, 벡터, 그라데이션, 이미지 및 텍스트 규칙을 포함한 런타임 테마 지정, 타입 지정 이벤트가 포함된 대화형 상태 머신, 애니메이션 타임라인과 동기화되어 재생되는 임베디드 오디오 등 dotLottie v2 기능을 지원합니다. DotLottieWorker 옵션을 사용하면 OffscreenCanvas를 통해 웹 워커(Web Worker)에서 렌더링할 수 있으며, 워커 경계를 넘나들기 때문에 해당 메서드들은 Promise 기반으로 작동합니다. 기본 소프트웨어 백엔드는 광범위하게 작동하며, WebGL2 및 WebGPU는 리소스 요구량이 많은 경우 선택적으로 사용할 수 있습니다. 저장소는 6개의 퍼스트 파티 SDK 패키지를 제공합니다. 바닐라 자바스크립트용 @lottiefiles/dotlottie-web을 비롯해 React, Vue 3, Svelte, Solid 및 프레임워크에 구애받지 않는 웹 컴포넌트 패키지가 포함됩니다. 모든 SDK는 Lottie JSON과 dotLottie 파일을 모두 렌더링할 수 있습니다. 런타임 제어 기능으로는 animationId 및 loadAnimation을 통한 다중 애니메이션 전환, 이름 지정 마커, 프레임 세그먼트, 레이아웃 맞춤 및 정렬, 동적 데이터를 위한 슬롯, 재생 모드(정방향, 역방향, 바운스, 역방향 바운스), 프레임 보간, 캔버스가 화면 밖으로 나갔을 때의 일시 정지 기능 등이 있습니다. 플레이어는 로드, 재생, 일시 정지, 프레임, 완료, 루프 및 상태 머신 전환을 포함한 25개 이상의 타입 지정 이벤트를 노출합니다. 이 프로젝트에는 홈, 플레이그라운드, 성능, 리스트 및 임베드 페이지가 포함된 호스팅 뷰어, CodePen 예제, 그리고 웹, Node.js, React, Vue, Solid, 웹 컴포넌트 및 Next.js SSR 안전 렌더링을 위한 실행 가능한 로컬 예제가 포함되어 있습니다. 필수 환경 기능으로는 WebAssembly, Canvas 2D 및 Fetch API가 필요하며, 웹 워커, OffscreenCanvas, WebGL2 및 WebGPU는 선택적 강화 기능입니다. 지원되는 최소 브라우저 버전은 Chrome 57+, Firefox 52+, Safari 11+, Edge 16+, iOS Safari 11+이며, 서버 사이드 사용을 위해 Node.js 18+가 필요합니다. 코드는 MIT 라이선스로 제공됩니다.