Kuplan animaatio React Native -sovelluksen avulla

React Native -sovelluksen rakentamisessa opitut kokemukset animoituja ja PanResponder-sovelluksia käyttämällä

Tässä artikkelissa puhun kuinka toteutin sovelluksensiirtymän, jonka löysin Dribbble by Ramotion -sivustosta.

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

Tätä sivutusohjainta voidaan käyttää virtauksen sisäänpääsyyn tai opetusohjelmaan.

Koko versio julkaistaan ​​Expossa, ja saat sen avaamalla Expo-sovelluksen ja skannaamalla tämän QR-koodin:

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

Aloitetaan, aiommeko?

Näin rakensin taustan:

Minulla oli View pitämällä taustaväriä. Tähän sisältyy Animated.View kuplaanimaatioon. Sen sijainti oli ehdoton niin, että se pysyi näytön päällä. Lisäsin myös joitain perustyylejä.

Sitten animoin kuplan laajentamalla 0: sta maksimiin käyttämällä CSS-muunnosasteikkoa Animated.timing -sovelluksella.

Yllä oleva animaatio tarvitsi laukaista käyttäjän käyttäytymisen perusteella. Käytin ensin TouchableWithoutFeedback. Sitten muutin sen eleillä.

Sijoita minun kupla gifin mukaan, joka animoi alhaalta. Tein tämän ylä- ja vasemman omaisuuden avulla.

Siisti! Tulokset ovat odotetusti väriä lukuun ottamatta. Palaamme siihen myöhemmin.

Nyt uudistin koodia siirtämällä kuplalogiikan erilliseen komponenttiin, nimeltään CircleTransition. Sitten käynnistin animaation vanhemmasta komponentista.

Sitten oli aika puuttua väriin. Jotta kupla animoituu uudella värillä, välitin uuden värin komponenttiin. Ja siirron jälkeen piilotin kuplan.

Voitko nähdä jotain outoa yllä olevassa muutoksessa?

Toisen kuplasiirtymän aikana taustaväri laskee takaisin ensimmäiseen väriin. Minun piti päivittää taustaväri uuteen väri kupla siirtyessä.

Lähetin soittopyynnön aloitusmenetelmälle, joka toteutettiin, kun muutos oli valmis.

Voila! Se on kaikki asetettu. Nyt minulla oli animaation perustoiminta.

Seuraavaksi sain eleen. Kupla siirtyy, kun käyttäjä siirtyy vasemmalle tai oikealle gif-kuvan mukaan.

Loin uuden komponentin nimeltä Swipe. Se sisältää kaiken eleen logiikan ja korvaaTouchableWithoutFeedback.

Käytin PanResponderia, joka sovittaa useita kosketuksia yhteen eleeseen. Se tekee yhden kosketuksen eleistä joustavia ylimääräisille kosketuksille. Se tunnistaa myös yksinkertaiset monikosketus eleet. Lisätietoja tästä voit käydä täällä ja täällä.

Eleiden logiikka.

Ensin piti selvittää mihin suuntaan käyttäjä pyyhkäisee. Minun täytyy animoida vain, kun käyttäjä siirtyy vasemmalle tai oikealle. Pyysin myös asettamaan jonkin kynnysarvon sen selvittämiseksi, onko kyseessä todella pyyntö.

Jos se oli kelvollinen pyyhkäisy, käynnistin asianmukaisen toiminnan.

Joo! Arvasit sen oikein. Olen saanut, mitä halusin saavuttaa eleellä. Sitten lisäsin toiminnon swipeRight. Ele suoritettiin loppuun hiukan uudelleenkehittämällä.

Se siitä! Tämä oli sovelluksen monimutkaisin osa.

En näytä koko työtäni tässä sovelluksessa. Tämän viestin tietojen pitäisi olla tarpeeksi apua oman rakentamisessa. Haarukoi tämä ja yritä suorittaa sovelluksesi loppuun vastaava gif.

Jos olet jumissa ja tarvitset apua, lopullinen versio on tuloksena haara, kurkista. Voit myös pingittää minua Twitterissä @narendra_shetty tai kommentoida alla.

Ja kun olet valmis, jaa Expo / GitHub -linkkisi.

Jos tämä artikkeli oli sinulle avuksi, taputtele minua. Se motivoi minua kirjoittamaan lisää :)