Käytä jatkuvaa animaatiota parantaaksesi React Native -sovelluksesi käyttökokemusta ja tehdäksesi siitä mukaansatempaavampi ja eloisampi.

Yksi React Nativen animoidun API: n tärkeimmistä ominaisuuksista on Animated.loop() menetelmä, jolla voit luoda jatkuvaa animaatiota, joka toistuu loputtomasti.

Tutkimme kuinka Animated.loop()-menetelmää käytetään jatkuvan animaation luomiseen React Nativessa ja opimme mukauttamaan ja parantamaan näitä animaatioita.

Animated.loop()-menetelmän ymmärtäminen

Jotta voit käyttää Animated.loop() -menetelmää, sinun on ensin luotava Animoitu. Arvo esine. Tämä arvo päivittyy animaatiosilmukan jokaisessa kehyksessä, ja sitä käytetään kohdekomponentin animoimiseen.

Kerran animoitu. Arvoobjekti on luotu, voit välittää sen Animated.loop()-metodille yhdessä animaation konfigurointiobjektin kanssa, joka määrittää animaation käyttäytymisen.

Tämä konfigurointiobjekti voi sisältää ominaisuuksia, kuten kesto, helpotus, ja viive, jotka määrittävät animaation käyttäytymisen.

Animaatiosi kiertäminen

instagram viewer

Oletusarvon mukaan Animated.loop()-metodi luo animaatiosta loputtoman silmukan, mikä tarkoittaa, että animaatio jatkaa toistamista, kunnes se pysäytetään manuaalisesti. Voit kuitenkin määrittää animaatiosilmukan keston asettamalla iteraatioita -ominaisuus animaation määritysobjektissa.

Seuraava esimerkki, joka osoittaa, kuinka Animation.loop()-funktiota käytetään silmukan kiertoanimaatioiden luomiseen:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { Tyylitaulukko, näkymä, animoitu, kuva } alkaen'react-native';
viedäoletuksenatoimintoSovellus() {
konst [spinValue] = useState(Uusi Animoitu. Arvo(0));


 useEffect(() => {
konst spin = spinArvo.interpolate({
 inputRange: [0, 1],
 lähtöalue: ['0deg', "360 astetta"],
 });


 Animated.loop(
 Animated.timing(
 spinValue,
 {
 arvostaa: 1,
 kesto: 2000,
 useNativeDriver: totta,
 }
 )
 ).alkaa();
 }, []);


palata (

 tyyli={{ leveys: 200, korkeus: 200, muuttaa: [{ kiertää: spinValue }] }}
 lähde={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst styles = StyleSheet.create({
 kontti: {
 flex: 1,
 alignItems: 'keskusta',
 perustellaContent: 'keskusta',
 },
});

Tässä esimerkissä luomme animoidun. Arvoobjekti kutsutaan spinValue ja aseta sen alkuarvo 0:ksi. Soitamme sitten loop() menetelmällä Animated.timing() objekti, joka ottaa argumentiksi tilan spinValue. Animated.timing() -objekti kuvaa, kuinka animaatio etenee ajan myötä, ja tässä tapauksessa se kiertää kuvaa 360 astetta.

Silmukan keston asettamiseksi olemme ohittaneet a kesto Ominaisuus Animated.timing() -objektille, joka määrittää, kuinka kauan animaatio kestää ennen silmukkaa. Asetamme kesto-ominaisuuden arvoksi 2000, mikä tarkoittaa 2 sekuntia ennen uudelleenkäynnistystä.

Voit myös määrittää, kuinka monta kertaa animaation tulee toistua ohittamalla iteraatioita ominaisuus loop()-metodiin.

Oletetaan esimerkiksi, että haluat animaation toistuvan viisi kertaa ennen pysähtymistä. Siinä tapauksessa voit kutsua Animated.loop() -komennolla iteraatiot: 5. Jos haluat animaation jatkuvan rajattomasti, voit jättää pois iteraatioita omaisuutta kokonaan.

Käyttämällä Animation.loop() sen kestoa ja soveltaa CSS-tyyliä oikein palautettuun näkymäobjektiin, voit luoda sileitä silmukkaanimaatioita React Nativessa.

Työskentely monimutkaisen animaation kanssa

Monimutkaisen animaation kanssa työskentely ei ole niin yksinkertaista kuin yksittäisen animaation kanssa. Ne vaativat yleensä hieman enemmän työtä varmistaakseen, että he käyttäytyvät odotetulla tavalla.

Tässä on kaksi vinkkiä, jotka auttavat sinua luomaan monimutkaisia ​​animaatioita React Nativessa:

1. Jaa animaatio pienempiin osiin

Voit jakaa monimutkaiset animaatiot pienempiin, yksinkertaisempiin animaatioihin, jotka voidaan silmukalla yksitellen. Esimerkiksi monimutkainen animaatio, jossa on sekä kierto että käännös, voidaan jakaa kahdeksi erilliseksi animaatioksi, jotka silmukataan itsenäisesti. Jakamalla animaation pienempiin osiin voit yksinkertaistaa koodia ja helpottaa sen käsittelyä.

2. Käytä Animated.sequence() -menetelmää

The Animated.sequence() -menetelmän avulla voit suorittaa animaatiosarjan peräkkäin. Tällä menetelmällä voidaan luoda monimutkaisia ​​silmukkaanimaatioita ketjuttamalla yksisilmukaisia ​​animaatioita. Voit käyttää Animated.sequence()-komentoa luodaksesi animaation, joka ensin häivyttää kuvassa, kiertää sitä ja sitten häivyttää sen toistaen koko sarjan, kun se on valmis.

Nämä vinkit toimitetaan yhdessä yleisiä vinkkejä React Native -sovellustesi optimointiin auttaisi sinua luomaan tehokkaita silmukkaanimaatioita.

Kokeile animaatiollasi

React Nativen silmukkaanimaatiot voivat olla tehokas työkalu kiinnostavamman ja dynaamisemman käyttökokemuksen luomiseen. Sinun tulisi kokeilla erilaisia ​​tekniikoita silmukkaanimaatioiden luomiseen saadaksesi sekä visuaalisesti houkuttelevan että suorituskykyisen animaation.