Bubble-animation med React Native

Erfaringer, mens du bygger en React Native App ved hjælp af Animeret og PanResponder

I denne artikel vil jeg tale om, hvordan jeg implementerede en appovergang, som jeg fandt på Dribbble af Ramotion.

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

Denne paginationskontroller kan bruges til ombordstrømning eller til en tutorial.

Den komplette version offentliggøres i Expo, og du kan få den ved at åbne Expo-appen og scanne denne QR-kode:

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

Lad os begynde, skal vi?

Sådan byggede jeg baggrunden:

Jeg havde udsigt med baggrundsfarven. Dette inkluderer Animated.View til bobleanimationen. Dens position var absolut, så den blev øverst på skærmen. Jeg tilføjede også nogle grundlæggende stilarter.

Derefter animerede jeg boblen ved at udvide fra 0 til maks ved hjælp af CSS-transformskalaen med Animated.timing.

Ovenstående animation er nødvendig for at udløse baseret på brugerinteraktion. Først brugte jeg TouchableWithoutFeedback. Derefter ændrede jeg det med bevægelser.

Jeg placerede boblen i henhold til gif, der animerede fra bunden. Jeg gjorde dette ved hjælp af ejendom øverst og venstre.

Neat! Resultaterne er som forventet undtagen farven. Vi kommer tilbage til det senere.

Nu har jeg omstruktureret koden ved at flytte boblelogikken til en separat komponent kaldet CircleTransition. Derefter udløste jeg animationen fra den overordnede komponent.

Så var det tid, hvornår man skulle tackle farven. For at gøre boblen animeret med den nye farve, sendte jeg den nye farve ind i komponenten. Og efter overgangen skjulte jeg boblen.

Kan du se noget underligt i ovennævnte overgang?

Under den anden bobleovergang falder baggrundsfarven tilbage til den første farve. Jeg var nødt til at opdatere baggrundsfarven til den nye farve med boblen overført.

Jeg sendte et tilbagekald til startmetoden, der blev udført, når overgangen var afsluttet.

Voila! Det er klar. Nu arbejdede jeg med den grundlæggende animation.

Dernæst kom jeg i bevægelsen. Boblen overgår, når brugeren stryger til venstre eller højre i henhold til gif.

Jeg oprettede en ny komponent kaldet Swipe. Det indeholder al logik for gestus og erstatter TouchableWithoutFeedback.

Jeg brugte PanResponder, som forener flere berøringer til en enkelt gestus. Det gør bevægelser med enkelt tryk modstandsdygtige over for ekstra berøring. Det kan også genkende simple multi-touch bevægelser. For mere om dette kan du gå her og her.

Nu for bevægelsens logik.

Først havde jeg brug for at finde ud af, hvilken retning brugeren stryger. Jeg behøver kun at animere, når brugeren stryger til venstre eller højre. Jeg var også nødt til at indstille en tærskel for at bestemme, om det faktisk er en stryg eller ej.

Hvis det var en gyldig stryg, udløste jeg den passende handling.

Ja! Du gættede det rigtigt. Jeg har fået det, jeg ville opnå med gestus. Derefter tilføjede jeg en handling til swipeRight. Gesten blev afsluttet med en smule refactoring.

Det er det! Dette var den mest komplekse del i appen.

Jeg vil ikke vise mit komplette arbejde på denne app. Oplysningerne i dette indlæg skal være nok til at hjælpe dig med at opbygge dine egne. Gaffel dette, og prøv at fuldføre din app for at matche ovenstående gif.

Hvis du sidder fast og har brug for hjælp, er den endelige version i resultatgren, kig. Du kan også pinge mig på Twitter @narendra_shetty eller kommentere nedenfor.

Og når du er færdig, skal du dele dit Expo / GitHub-link.

Hvis denne artikel var til nogen hjælp for dig, så klap for mig. Det vil motivere mig til at skrive mere :)