dotlottie web

dotlottie 웹

Dotlottie 및 Lottie Animations의 LottieFiles의 공식 플레이어로 웹 애니메이션을 간소화하십시오. 빠른 통합을 위해 설계된이 패키지는 개발자가 최소한의 노력으로 애니메이션 비주얼을 웹 프로젝트에 신속하게 가져 오는 데 도움이됩니다.

dotlottie는 무엇입니까?

DotLottie는 하나 이상의 LOTTIE 파일과 관련 리소스를 단일 파일로 집계하는 오픈 소스 파일 형식입니다. Deflate 압축 방법으로 압축 된 Zip Archives이며 ".lottie"의 파일 확장자를 전달합니다.

dotlottie에 대해 자세히 알아보십시오.

내용물

• 패키지
• 시작하기
  • 전제 조건
  • 설정
• 라이브 예
• 로컬 사례
• 개발
  • 건물 패키지
  • 현지에서 실행
  • 스크립트
• 기여
• 특허

패키지

Monorepo에는 다음 패키지가 포함되어 있습니다.

패키지	설명
@lottiefiles/dotlottie-web	브라우저 또는 node.js에서 Lottie 및 Dotlottie 애니메이션을 렌더링하기위한 JavaScript 라이브러리
@lottiefiles/dotlottie-react	Lottie 및 Dotlottie 애니메이션을 렌더링하기위한 선언적 API를 제공하는 dotlottie-web 의 React 구성 요소 래퍼 및 UI와의 상호 작용을위한 UI 컨트롤을 제공합니다.
@lottiefiles/dotlottie-wc	dotlottie-web 용 웹 구성 요소 래퍼는 Lottie 및 Dotlottie 애니메이션을 렌더링하기위한 선언적 API를 제공하고 UI와의 상호 작용을위한 UI 컨트롤을 제공합니다.
@lottiefiles/dotlottie-vue	Lottie 및 Dotlottie 애니메이션을 렌더링하기위한 선언적 API를 제공하는 dotlottie-web 용 VUE 구성 요소 래퍼 및 UI와의 상호 작용을위한 UI 컨트롤을 제공합니다.
@lottiefiles/dotlottie-svelte	Lottie 및 Dotlottie 애니메이션 및 UI 컨트롤을 상호 작용하기위한 선언적 API를 제공하는 dotlottie-web 용 Svelte 구성 요소 래퍼.

참고 : 각 패키지에는 사용 및 API에 대한 자세한 문서가있는 자체 readme.md가 있습니다.

시작하기

이 Monorepo에 기여하거나 프로젝트에서 패키지를 사용하려면 다음을 따르십시오.

전제 조건

다음을 설치했는지 확인하십시오.

• node.js 버전 18 이상
• pnpm 버전 8

설정

Monorepo를 복제하십시오.

git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web

종속성 설치 :

pnpm install

라이브 예

• @lottiefiles/dotlottie-web

  • 시작하기
  • 애니메이션 재생 제어
  • 동적 애니메이션로드
  • 멀티 애니메이션 .Lottie 파일
  • 고급 애니메이션 레이아웃
  • 마커 명명
  • Dotlottie 테마

• @lottiefiles/dotlottie-react

  • 시작하기
  • 사용자 정의 재생 컨트롤

• @lottiefiles/dotlottie-vue

  • 시작하기

로컬 사례

예제 응용 프로그램과 함께 Dotlottie-Web 패키지를 구현하고 활용하는 방법을 알아보십시오. 이 예제는 Lottie 및 Dotlottie 애니메이션을 웹 프로젝트에 통합하는 방법을 이해하는 데 도움이되는 실용적인 가이드 역할을합니다.

사용 가능한 예 :

• dotlottie-web-example : @lottiefiles/dotlottie-web 사용하여 브라우저에서 lottie 또는 dotlottie 애니메이션을 렌더링하는 방법에 대한 기본 타이프 스크립트 예제 앱.
• dotlottie-web-node-example :이 예제는 node.js 환경에서 @lottiefiles/dotlottie-web 사용하는 방법을 보여줍니다. 애니메이션 재생 제어, 프레임별로 프레임 렌더링 및 Dotlottie 애니메이션을 GIF 파일로 변환하는 것을 보여줍니다. 자세한 내용은 readme를 참조하십시오.

실행 된 예제

• 저장소 복제 :

git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web

• 종속성 설치 :

pnpm install

• 패키지 구축 :

pnpm run build

• 앱 실행 :

 # Change directory to the example app folder
cd apps/dotlottie-web-example 
pnpm run dev

변경 사항이 애니메이션에 어떤 영향을 미치는지 확인하기 위해 코드를 수정하고 재생하십시오.

개발

건물 패키지

Monorepo 내에 모든 패키지를 작성하려면 :

pnpm run build

현지에서 실행

모든 패키지에 대한 지역 개발 환경을 시작하려면 :

pnpm run dev

스크립트

다음은 루트 패키지에서 사용 가능한 스크립트에 대한 간략한 설명입니다 .JSON :

• build : 터보를 사용하여 모든 패키지를 빌드합니다.
• changelog : ChangeLog 및 버전 업데이트를 생성하기 위해 Changes 세트를 추가합니다.
• clean : 개발 아티팩트를 제거하여 저장소를 정리합니다.
• dev : 개발/시계 모드에서 모든 패키지를 실행합니다.
• format : 더 예쁘고 비고를 사용하여 코드베이스를 형식화합니다.
• lint : ESLINT를 사용하여 코드베이스를 줄입니다.
• test : 모든 패키지에서 테스트를 실행합니다.
• type-check : TypeScript 유형 오류를 확인합니다.

사용 가능한 스크립트의 전체 목록은 package.json 의 scripts 섹션을 참조하십시오.

기여

우리는이 Monorepo의 패키지에 기여를 환영합니다. 기고 가이드 라인과 행동 강령을 읽어 개발 프로세스, 버그 수정 및 개선 사항을 제안하는 방법, 프로젝트 변경 및 테스트 방법에 대해 알아보십시오.

특허

mit © lottiefiles