간단한 스프링 애니메이션 프리미티브로 컴포넌트에 생명을 불어 넣으십시오

react-spring은 대부분의 UI 관련 애니메이션 요구를 충족해야 하는 스프링 물리 기반 애니메이션 라이브러리입니다. 

아이디어를 움직이는 인터페이스로 자신 있게 전달할 수 있는 유연한 도구를 제공합니다.

이 라이브러리는 현대적인 애니메이션 접근 방식을 나타냅니다. Christopher Chedeau의 애니메이션과 Cheng Lou의 반응 모션에서 많은 영감을 받았습니다. 반응 모션의 사용 편의성과 애니메이션의 강력한 보간 및 성능을 상속합니다. 그러나 애니메이션은 대부분 명령형이고 반응 모션은 대부분 선언적이며 반응 스프링 브리지입니다. 뷰를 구성하는 방법에 반드시 영향을 주지 않는 작고 명시적인 유틸리티 함수를 사용하여 정적 데이터가 얼마나 쉽게 움직이는 지 놀랄 것입니다.

설치 

npm install react-spring 

플랫폼 

react-spring은 크로스 플랫폼이며 웹, 반응 네이티브, 반응 네이티브 웹 및 실질적으로 다른 플랫폼을 지원합니다 (이 경우 / universal 내보내기를 사용하면 기본 요소 및 색상 보간을 수행하지 않음).

브라우저 지원 

라이브러리는 다음과 같은 브라우저 목록 구성을 사용하여 상록 브라우저 용으로 컴파일 된 es-module로 제공됩니다.> 1 %, 죽지 않았으며, 11이 아니라 op_mini가 아닙니다. 레거시 대상을 지원하거나 모듈을 지원하지 않는 대상을 처리해야 하는 경우 가져 오기에 .cjs를 추가하여 commonJS 내보내기를 사용할 수 있습니다.

크기 

포함 된 모든 것은 현재 10.7KB (웹), 9.7KB (반응 형) 또는 6.9KB (/ 범용 내보내기)로 끝납니다. 크기는 궁극적으로 빌드 체인에 따라 다르며 트리 쉐이킹으로 줄어들 수 있습니다. 예를 들어, 색상 보간없이 useSpring을 가져 오면 (/ universal 내보내기 사용) 4.7KB가 됩니다.