Нека научим как да използваме React Native — анимирана библиотека

какво ще строим...

какво ще ви трябва...

  • create-react-native-app, nodejs и симулатор (ios или Android)
  • 30 минути до един час зависи от вашето познаване на React & JS

програмен код

  • кодът за това е тук, можете да намерите изображенията в папка /img

Настройвам

Тъй като Expo се грижи за голяма част от основната работа (напр. изграждане и работа на симулатори за ios и android), настройката е доста проста.

След като стартирате create-react-native-app halloween, отворете App.js файла.
Ще създадем няколко компонента, но просто ще ги запазя във файл App.js за краткост.

Създадох gif изображение за тиква и фоново изображение на вещица въз основа на мюзикъла Wicked. Чувствайте се свободни да използвате каквото изображение искате.

Изграждане на потребителския интерфейс

Това е сравнително малък проект, но винаги обичам сам да настройвам рутер, така че да имам контрол върху това кой компонент искам да показвам на екрана. Можем да направим …

И след това създайте компонентите<StartPage /> и <MainPage />...

И накрая, стиловете...

Стилът е много подобен на CSS, ако сте запознати с web-dev и flex-box, това трябва да се почувства като у дома си.

Ако сте направили всичко правилно досега, трябва да можете да навигирате между тези две страници.

Анимации

Сега трябва да се заемем със забавната част - анимацията. Вярвам, че има някои npm пакети, които можете да използвате за постигане на анимации на ниво компонент в RN, но тъй като API на ниско ниво не е толкова трудно да се научи (и често е добра идея да създадете своя собствена анимация от нулата), аз Ще използвам „Анимиран“ модул, който се доставя с RN.

избледняваща анимация

Първо, нека създадем компонент за обвивка с избледняване. Ще използваме това, за да обвием тези два компонента, които току-що създадохме.

и след това го използваме, за да обвием началния и основния компонент на страницата, така,

И нека тестваме това...

Изглежда доста добре! Чувствайте се свободни да си играете с тези стойности в метода .timing и вижте какво можете да постигнете — наистина е забавно!

анимация на въртяща се тиква

Във визуализацията на приложението може би сте забелязали, че някои от тиквите се въртят.

Това е доста лесно да се направи – първо създаваме компонента тиква, инициираме нов Animated.Value от 0, предаваме го на метод на завъртане, който ще създаваме, и накрая използваме interpolate(), за да начертаем диапазоните (вход, степен, и т.н. …).

Този start(() => this.spin()) се използва за зацикляне на анимацията. Вярвам, че API има „цикличен метод“, така че ако искате да го използвате, не се колебайте да го направите.

И поставете този компонент в компонента MainPage и трябва да видите нещо подобно,

Разположението е странно, но ние ще се погрижим за това, след като направим тиквата докосваема и добавим пролетна анимация към нея.

пролетна анимация

Сега трябва да направим тиквата отзивчива на докосване (или натискане) и да върнем пролетна анимация като обратна връзка. За да направим това, ще обвием компонента с компонент <TouchableHighlight> и ще предадем метода на пролетна анимация, който ще напишем в onPress prop.

Забележете onPress ={isPressed ? this.spring.bind(this): null}, добавихме този троичен оператор, за да сме сигурни, че тиквата е недосегаема, докато анимацията не приключи. И вместо изрично да задаваме ширината и височината, ние предаваме тези стойности като подпори, така че да могат лесно да се конфигурират. Същото важи и за опората за въртене - ако стойността е вярна, анимацията за въртене ще се задейства.

Ако всичко е написано правилно, трябва да видите това,

Обобщавайки

Това е почти всичко! Исках да направя бързо упражнение за API за RN анимация, така че го измислих в самолета у дома и кодирах днес. Отне ми около няколко часа и не съм експерт по RN, така че това трябва да е лесно и за вас, ако сте запознати с React и Javascript.

Надявам се, че сте намерили този блог за полезен за вашия проект. Ако имате някакви въпроси, моля, не се колебайте да коментирате или да се свържете с мен на [email protected]

Можете да намерите изходния код за това тук

🎃🎃🎃🎃Честит Хелоуин!🎃🎃🎃🎃🎃

  • Корейската версия на тази статия все още не е написана.