Mullianimatsioon rakendusega React Native

Reactive Native Appi loomise ajal õpitud õppetunnid, kasutades Animeeritud ja PanResponderit

Selles artiklis räägin sellest, kuidas rakendasin rakenduse ülemineku, mille leidsin rakendusest Dribbble by Ramotion.

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

Seda leheküljekontrollerit saab kasutada voolu sisenemiseks või juhendamiseks.

Tervikversioon on avaldatud Expos ja saate selle, avades rakenduse Expo ja skannides seda QR-koodi:

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

Alustame, kas peame?

Tausta ehitasin järgmiselt:

Mul oli vaade taustavärvi hoidmine. See hõlmab mulli animatsiooni Animated.View. Selle positsioon oli absoluutne, nii et see püsis ekraani ülaosas. Lisasin ka mõned põhistiilid.

Seejärel animeerisin mulli, laiendades seda 0-lt maksimumini, kasutades CSS-i teisendusskaalat rakendusega Animated.timing.

Ülaltoodud animatsioon oli vajalik käivitamiseks kasutaja interaktsiooni põhjal. Esiteks kasutasin ühendust puudutatavaga, ilma tagasisideta. Siis muutsin seda žestidega.

Ma asetasin mulli vastavalt gifile, mis animeeris alt üles. Tegin seda ülemise ja vasaku vara abil.

Puhas! Tulemused on ootuspärased, välja arvatud värv. Naaseme selle juurde hiljem.

Nüüd struktureerisin koodi ümber, viies mulli loogika eraldi komponendiks, milleks on CircleTransition. Seejärel käivitasin animatsiooni vanemkomponendist.

Siis oli aeg hakata värviga tegelema. Selleks, et mull uue värviga animeeriks, andsin uue värvi komponendile. Ja pärast üleminekut peitsin mulli.

Kas näete ülaltoodud üleminekul midagi imelikku?

Teise mulli ülemineku ajal langeb taustvärv tagasi esimeseks värviks. Pidin värskendama mulli üleminekuga taustvärvi uuele värvile.

Sain tagasihelistamise algmeetodile, mis viidi lõpule siis, kui üleminek oli lõpule viidud.

Voila! Kõik on valmis. Nüüd oli mul põhianimatsioon töös.

Järgmisena sattusin žesti juurde. Mull läheb üle, kui kasutaja libiseb vastavalt gif-ile vasakule või paremale.

Lõin uue komponendi nimega Swipe. See sisaldab kogu žesti loogikat ja asendab funktsiooniTouchableWithoutFeedback.

Kasutasin PanResponderit, mis ühitab mitu puudutust ühe žestiga. See muudab ühe nupuvajutusega žestid täiendavate puudutuste suhtes vastupidavaks. See tunneb ära ka lihtsad mitme puutega žestid. Selle kohta saate lisateavet siit ja siit.

Nüüd liigutuste loogika jaoks.

Esmalt oli mul vaja välja mõelda, millises suunas kasutaja libiseb. Mul on vaja animeerida ainult siis, kui kasutaja libistab vasakule või paremale. Samuti oli mul vaja seadistada mõni lävi, et teha kindlaks, kas see on tõesti libistamine.

Kui see oli kehtiv pühkimine, vallandasin vastava toimingu.

Jah! Arvasite õigesti. Olen saanud selle, mida tahtsin žestiga saavutada. Siis lisasin funktsiooni swipeRight jaoks. Žest viidi lõpule natuke refaktoriga.

See selleks! See oli rakenduse kõige keerulisem osa.

Ma ei näita oma täielikku tööd selle rakendusega. Selles postituses olev teave peaks olema piisav, et aidata teil oma asju üles ehitada. Kahvlige seda ja proovige oma rakendus lõpule viia, et see vastaks ülaltoodud gifile.

Kui olete ummikus ja vajate abi, on lõppversioon tulemuse harus, vaadake. Samuti võite mind pingutada Twitteris @narendra_shetty või kommenteerida allpool.

Ja kui olete lõpetanud, jagage palun oma Expo / GitHubi linki.

Kui see artikkel oli teile abiks, siis plaksutage minu jaoks. See motiveerib mind rohkem kirjutama :)