Нека научим как да използваме 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]
Можете да намерите изходния код за това тук
🎃🎃🎃🎃Честит Хелоуин!🎃🎃🎃🎃🎃
- Корейската версия на тази статия все още не е написана.