반응 네이티브용 SVG 애니메이션 래퍼
반응 네이티브 svg 애니메이션
반응 네이티브용 SVG 애니메이션 래퍼. 이 프로젝트의 예를 기반으로: https://github.com/ethantran/react-native-examples
종속성
svg-path-propertiesreact-native-svg
설치
$ npm i react-native-svg-animations --save 데모
| 애니메이션 SVG 경로 | 애니메이션 SVG 경로 |
|---|---|
 |  |
용법
이 패키지에는 애니메이션 SVG를 반응 네이티브로 표시하기 위한 래퍼 구성 요소가 포함되어 있으며 현재 다음이 포함되어 있습니다.
- 애니메이션 SVG 경로
- 애니메이션 SVG 경로
애니메이션 SVG 경로
단일 애니메이션 SVG 경로를 표시하는 구성 요소입니다. 보다 안녕하세요 예 완전한 구현을 위해.
import { AnimatedSVGPath } from 'react-native-svg-animations'; ...
여기서 속성은 다음과 같습니다.
- |_+_| - 애니메이션할 SVG 경로입니다. (필수의)
- |_+_| - 패스 획의 색상. (기본값은 검은색)
- |_+_| - 경로 스트로크의 두께. (기본값은 1)
- |_+_| - 스트로크의 수와 길이. (기본값은 d의 속성에서 얻은 총 길이)
- |_+_| - 기본 SVG의 높이. (기본값은 화면 뷰포트 높이)
- |_+_| - 기본 SVG의 너비. (기본값은 화면 뷰포트 너비)
- |_+_| - 기본 SVG의 너비와 높이를 기반으로 하는 출력 SVG의 크기입니다. (기본값은 1.0 또는 100%)
- |_+_| - 시간 |_+_| 애니메이션을 시작하기 전에 (기본값은 1000ms 또는 1초)
- |_+_| - 시간 |_+_| 시작점에서 끝점까지의 경로 그리기를 완료합니다. (기본값은 1000ms 또는 1초)
- |_+_| - 닫힌 경로의 색상 채우기. (기본값은 없음)
- |_+_| - 애니메이션이 무한 반복되는지 여부. (기본값은 true)
- |_+_| - 그리기 시작하고 이동하면서 페이드됩니다. (기본값은 거짓)
- |_+_| - 경로가 완료되면 되감습니다. (기본값은 거짓)
애니메이션 SVG 경로
여러 애니메이션 SVG 경로를 표시하는 구성 요소입니다. 보다 Ingenuity 프리로더의 예 완전한 구현을 위해.
d...
strokeColor여기서 속성은 다음과 같습니다.
- |_+_| - 애니메이션할 SVG 경로는 배열이어야 합니다. (필수의)
- |_+_| - 패스 획의 색상. (기본값은 검은색)
- |_+_| - 경로 스트로크의 두께. (기본값은 1)
- |_+_| - 기본 SVG의 높이. (기본값은 화면 뷰포트 높이)
- |_+_| - 기본 SVG의 너비. (기본값은 화면 뷰포트 너비)
- |_+_| - 기본 SVG의 너비와 높이를 기반으로 하는 출력 SVG의 크기입니다. (기본값은 1.0 또는 100%)
- |_+_| - 시간 |_+_| 애니메이션을 시작하기 전에 (기본값은 1000ms 또는 1초)
- |_+_| - 시간 |_+_| 시작점에서 끝점까지의 경로 그리기를 완료합니다. (기본값은 1000ms 또는 1초)
- |_+_| - 닫힌 경로의 색상 채우기. (기본값은 없음)
- |_+_| - 애니메이션이 무한 반복되는지 여부. (기본값은 true)
- |_+_| - 그리기 시작하고 이동하면서 페이드됩니다. (기본값은 거짓)
- |_+_| - 경로가 완료되면 되감습니다. (기본값은 거짓)
모든 것
- 경로를 개체로 허용하여 단일 경로 각각에 대해 서로 다른 지연 및 지속 시간과 사용자 지정 경로 속성을 처리합니다.
- 기타 애니메이션 SVG 개체.
기여
- 포크!
- 기능 분기 생성: |_+_|
- 변경 사항 커밋: |_+_|
- 브랜치로 푸시: |_+_|
- 풀 리퀘스트를 제출하세요 :D
기여자
다음 개발자들에게 특별한 감사를 드립니다.
다운로드 세부 정보:
작가: 73R3WY
소스 코드: https://github.com/73R3WY/react-native-svg-animations
#react-native #react #모바일 앱