Анимирана графика в React Native

Наскоро търсех библиотека с графични карти React Native за моето приложение Savee.io. По време на изследването разбрах, че не е лесно да се справяш с графики в React Native. И ако искате да ги анимирате? Изглежда почти невъзможно. Следният gif е това, което направих и ще говоря в този „урок“!

Цел на тази статия

Без библиотека ART

Когато правех изследванията си за класациите в React Native, разбрах, че почти всички използват библиотеката ART. Което е наистина готина и мощна библиотека за рисуване. Вижте тази диаграма с пай, която е направена от библиотеката ART за приложението Savee.io.

Артистична библиотека за пай диаграми в savee.io

Но когато искате да го анимирате? Е, можеш. Възможно е. Но анимацията се извършва от JS нишка. Винаги се опитвам да намеря начин как да преместя всичко в родна част, така че нашата JS нишка не е блокирана от анимация и може да работи върху нещо друго.

Графиката на колоните, за която ще говоря (и можете да видите в gif по-долу) е направена от pure React Native. Няма ART библиотека!

Нека да е малко сложно

Разбрах, че също имам нужда от отрицателна стойност в графиката. Потребителите на Savee.io обикновено създават група за пътуване и проследяват разходите си. Очевидно има само отрицателни стойности - само разходи. Следващият gif показва как изглежда анимацията както за отрицателни, така и за положителни стойности.

оформление

Реших да направя всяка една колона поотделно като компонент. Така че бих могъл да добавя ефект на "забавяне". Можете да видите, че анимацията се стартира на случаен принцип за всяка една колона, когато графиката променя позиция на базова линия. Нека работим с височината 200. Височината на стойността може да бъде 25, а височината на етикета - 25. Това прави 150 за колона.

Оформление за една колона

Ако височината на графиката е 150, то височината на колоната е 300. Всяка колона има положителна част (A) и отрицателна част (B). Отсрещната страна на тези части винаги е скрита. A е скрита за отрицателната част, а B е скрита за положителната част. Това означава, че ако преместим положителната част (A) под основната линия към пространството B, положителната колона ще бъде напълно скрита. Това е, което искаме, когато стойността е отрицателна.

Положителни части от колони (лява страна) и отрицателни части от същите колони (дясна част)

Можете да видите отрицателната стойност за последната колона на снимката. Стойността е -5. Положителната колона е напълно преместена под основната линия (тя е скрита), а отрицателната колона е преместена в правилната позиция Y, за да представлява -5 стойност. Максимална стойност за тази графика е 10 (първа колона). Това означава, че -5 ще бъде в средата на отрицателна част (75/2).

Тук трябва да направим малко математика, защото трябва да интерполираме действителната стойност в позиция Y. Но тук няма да говоря за това. Вярвам, че можете да разберете всичко лесно.

Анимирана колона

Използвах моята библиотека с отворен код, наречена reakct-native-motion и компонент TranslateY. Което прави анимациите наистина лесни за изпълнение. Вижте кода. Лесно за разбиране. Ние използваме компонент TranslateY по същия начин, както бихме използвали компонента View. Единственото, което трябва да направим, е да изчислим Y позиции за положителна колона, отрицателна колона, базова линия и етикет за стойност.

Проверете резултата в реално приложение. Savee.io вече реализира графиката на колоните. Както казах преди, всичко се прави от нишката на потребителския интерфейс (това е доста бързо). Има събитие onPress, така че можете да промените месеците. Когато изберете категорията, тя ще промени стойностите на графика и преизчисли Y позиции. Тогава реакцията-native-motion се грижи за анимацията.

Анимирано число

Анимацията с числа е малко проблем. Защото не можем да го преместим в нишката на потребителския интерфейс. Това трябва да се направи от JS нишка. Видях, че разработчиците обикновено имат ефекта, извършен от setInterval. Разбира се, можете да го използвате, но аз исках да го направя по-безопасно.

Така че използвам анимационния API на React Native дори за анимация с номера. Можем да добавим слушател към анимирана стойност и когато стойността е променена, ние просто рендерираме номера. Лесно е и можете да се възползвате от API за анимирани приложения. Като използвате Easing например. И кое е най-доброто? Слагам компонента на библиотеката с реагиращо движение, която е отворена за вас, момчета

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

Предлага се в реакция-нативен-движение

Хареса ли ти? Плескайте, следвайте и го анимирайте!

Всъщност не е нужно да правите нищо от това. Но ще ми помогне много. Следващите статии са голяма мотивация.

За мен

Аз съм автор на Savee.io (който също използвам като площадка за анимациите си ‍). И автор на библиотеки react-native-material-ui и react-native-motion. Писане за тях в този блог.

Ако имате нужда от помощ с приложението си React Native (анимации, изпълнение и т.н.), уведомете ме, моля;) Ще се радвам да го обсъдим.
LinkedIn || Github || кикотене