Анимация с балончета с React Native

Уроци, научени при изграждането на React Native App, използвайки Animated и PanResponder

В тази статия ще говоря за това как реализирах преход на приложение, който намерих в Dribbble by Ramotion.

https://dribbble.com/shots/2694049-Pagination-Controller-App-Interface

Този контролер за страници може да се използва за бордов поток или за урок.

Пълната версия е публикувана в Expo и можете да я получите, като отворите приложението Expo и сканирате този QR код:

https://expo.io/@narendrashetty/onboarding-blog

Да започнем, нали?

Ето как създадох фона:

Имах View, който държи фоновия цвят. Това включва Animated.View за анимация с балончета. Позицията му беше абсолютна, така че остана на върха на екрана. Добавих и някои основни стилове.

След това анимирах балона, като разширих от 0 до макс, използвайки скалата за трансформация на CSS с Animated.timing.

Горната анимация, необходима за задействане въз основа на взаимодействието с потребителя. Първо използвах TouchableWithoutFeedback. Тогава го промених с жестове.

Позиционирах балончето според gif-а, който анимира отдолу. Направих това с помощта на горна и лява собственост.

Neat! Резултатите са според очакванията с изключение на цвета. Ще се върнем към това по-късно.

Сега преструктурирах кода, като премествах логиката на балончетата в отделен компонент, наречен CircleTransition. Тогава задействах анимацията от родителския компонент.

Тогава беше време кога да се справим с цвета. За да направя балончето оживено с новия цвят, прехвърлих новия цвят в компонента. И след прехода скрих балона.

Можете ли да видите нещо странно в горния преход?

По време на втория преход на балон цветът на фона се връща към първия цвят. Трябваше да актуализирам цвета на фона до новия цвят с преминаването на балона.

Предадох обратно извикване към стартовия метод, който се изпълни, когато преходът завърши.

Voila! Всичко е готово Сега работех с основната анимация.

След това се захванах с жеста. Балонът преминава, когато потребителят прекара наляво или надясно в съответствие с gif.

Създадох нов компонент, наречен Swipe. Той съдържа цялата логика за жеста и заместваTouchableWithoutFeedback.

Използвах PanResponder, който съгласува няколко докосвания в един жест. Това прави жестовете с едно докосване устойчиви на допълнителни докосвания. Той може също да разпознае прости жестове с много докосване. Повече за това можете да отидете тук и тук.

Сега за логиката на жестовете.

Първо трябваше да разбера в коя посока се плъзга потребителят. Трябва да анимирам само когато потребителят прекара в ляво или надясно. Трябваше също да настроя някакъв праг, за да определя дали всъщност е прекарване на пръст или не.

Ако беше валидно преминаване, задействах съответното действие.

Да! Правилно сте се досетили. Постигнах това, което исках да постигна с жеста. Тогава добавих действие за swipeRight. Жестът завърши с малко рефакторинг.

Това е! Това беше най-сложната част в приложението.

Няма да покажа цялостната си работа за това приложение. Информацията в тази публикация трябва да бъде достатъчна, за да ви помогне да изградите своя собствена. Направете това и се опитайте да попълните приложението си, за да съответства на горния gif.

Ако сте заседнали и се нуждаете от помощ, окончателната версия е в разклонение на резултата, погледнете. Също така можете да ме пингирате в Twitter @narendra_shetty или да коментирате по-долу.

И когато завършите, моля, споделете вашата връзка Expo / GitHub.

Ако тази статия е била от полза за вас, моля, ръкопляскайте за мен. Това ще ме мотивира да пиша повече :)