React Native를 사용한 애니메이션 풍선
4931 단어 twitterskiaanimationsreactnative
다음 섹션에서는 react-native-fiesta을 사용하여 몇 줄의 코드로 응용 프로그램에 애니메이션 풍선을 추가하는 방법을 살펴보겠습니다.
react-native-fiesta
는 @shopify/react-native-skia으로 빌드된 축하 애니메이션 세트를 제공하는 라이브러리입니다. 이것에 대한 좋은 점은 Skia가 React Native를 위한 고성능 2D 그래픽을 제공한다는 것입니다.종속성 설치
첫 번째 단계는 프로젝트에 필요한 모든 애니메이션을 제공하는 패키지
react-native-fiesta
를 설치하는 것입니다. 그렇게 하려면 다음 명령을 실행하여 설치해야 합니다.yarn add react-native-fiesta
react-native-fiesta
는 @shopify/react-native-skia
에 완전히 의존하므로 해당 패키지도 설치해야 합니다. 다음 명령으로 수행할 수 있습니다.yarn add @shopify/react-native-skia && npx pod-install
설치가 완료되면 라이브러리를 사용하여 애니메이션 풍선을 앱에 추가할 수 있습니다.
Fiesta를 사용하여 애니메이션 추가
그렇게 하려면 구성 요소 중 하나에서 라이브러리를 가져와야 합니다. 앱 구성 요소를 기본으로 사용합니다.
import React, from 'react'
import { Balloons } from 'react-native-fiesta'
Fiesta에서 풍선을 가져온 후 사용할 수 있습니다.
function App() {
return <Balloons />;
}
그게 다입니다. 응용 프로그램에 애니메이션 풍선이 있습니다. 사용자의 생일, 첫 구매, 앱 내에서 달성한 새로운 목표 또는 축하하고 싶은 다른 일을 축하하는 데 사용할 수 있습니다. 옵션은 끝이 없습니다.
Fiesta 풍선 사용자 지정
풍선 테마를 사용자화할 수도 있습니다. 콜롬비아 테마를 원한다고 가정해 보겠습니다. 다음을 수행하면 됩니다.
<Balloons theme={["#FCD116", "#003893", "#CE1126"]} />
그게 다야!
Fiesta는 다른 테마도 제공합니다. 가져오기만 하면 사용할 수 있습니다.
import { Balloons, FiestaThemes } from 'react-native-fiesta'
…
<Balloons theme={FiestaThemes.Neon} />
그러면 네온 색상이 있는 애니메이션 풍선이 생깁니다.
결론
이 게시물에서는
react-native-fiesta
를 사용하여 React Native에서 애니메이션 풍선을 추가하는 방법을 살펴보았습니다. 이제 사용자와 축하하고 이전과는 전혀 다른 관계를 맺을 수 있습니다.Twitter가 플랫폼에서 생일을 축하하는 방법에 익숙할 것입니다. 이 풍선은 그것에 영감을 받았습니다.
연결
Reference
이 문제에 관하여(React Native를 사용한 애니메이션 풍선), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mateoguzmana/animated-balloons-with-react-native-ec0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)