Animaatioiden käytön aloittaminen React Nativessa

Animaatiot voivat puhaltaa elämää sovellukseen, mikä tekee siitä kiinnostavamman ja intuitiivisemman käyttäjän kannalta. Mutta jos olet uusi React Native -animaatioiden käyttäjä, aloittaminen voi olla hieman pelottavaa.

Tutustu React Native -animaatioihin ja ota selvää, kuinka voit aloittaa kauniiden, sulavien animaatioiden luomisen.

Kuinka Basic React -animaatiot toimivat?

Animaatiot voivat luoda tasaisia ​​siirtymiä eri näyttöjen tai elementtien välillä. Ne voivat korostaa tietoja tai antaa palautetta käyttäjien toimista. Animaatiot voivat olla yksinkertaisia ​​tai monimutkaisia, ja niissä voidaan käyttää erilaisia ​​tekniikoita, kuten 2D- tai 3D-liikegrafiikkaa.

React Nativen siirrettävyys tekee siitä käytön arvoisen jos kohdistat useisiin alustoihin. Yksi sen vahvimmista ominaisuuksista on kyky luoda kauniita animaatioita mobiilisovelluksiin.

Voit animoida React Native -objektin yksinkertaisesti muuttamalla halutun komponentin sijaintitilaa.

Esimerkiksi:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti { Näytä, Tyylitaulukko } alkaen'react-native';
konst Sovellus = () => {
// Alusta tila seurataksesi laatikon sijaintia
konst [boxPosition, setBoxPosition] = useState(0);
// Käytä useEffect-koukkua päivittääksesi laatikon sijainnin sekunnin välein
 useEffect(() => {
konst interval = setInterval(() => {
// Päivitä laatikon sijainti lisäämällä 10 nykyiseen sijaintiin
 setBoxPosition(prevSijainti => prevPosition + 10);
 }, 1000);
// Palauta puhdistusfunktio tyhjentääksesi aikavälin, kun komponentti
// irrottaa
palata() => clearInterval (intervalli);
 }, []);
// Aseta laatikon sijainti tilamuuttujan avulla inline-tyyliin
konst boxStyle = {
 muunnos: [{ kääntääY: boxPosition }]
 };
palata (


 </View>
 );
};
konst styles = StyleSheet.create({
 kontti: {
 flex: 1,
 alignItems: 'keskusta',
 perustellaContent: 'keskusta',
 },
 laatikko: {
 leveys: 100,
 korkeus: 100,
 taustaväri: 'sininen',
 },
});
viedäoletuksena Sovellus;

Tämä koodi tuottaa sinisen laatikon, joka liikkuu alaspäin joka sekunti. Animaatio toimii käyttämällä useEffect koukku luodaksesi ajastimen, joka päivittää laatikon sijainti tilamuuttuja 1 sekunnin välein.

Vaikka tämä saattaa toimia joissakin tilanteissa, tämä ei ole paras vaihtoehto. Tilapäivitykset React Nativessa toimivat asynkronisesti, mutta animaatioiden toiminta edellyttää synkronoituja tilapäivityksiä. Animaatiosi asynkroninen toteuttaminen aiheuttaa sen, että tilapäivitykset eivät heti näy komponentin renderöidyssä lähdössä, mikä sotkee ​​animaatioidesi ajoituksen.

Ne ovat useita animaatiokirjastoja, kuten Animoitu kirjasto, reagoi-syntyperäinen-reanimoi, ja reagoi-natiivi-animoitu suorituskykyisten animaatioiden rakentamiseen React Nativessa. Jokainen näistä animaatiokirjastoista kumoaa asynkronisten tilapäivitysten ongelman ja on täysin ihanteellinen.

React Native Animated API

Animated on API, jonka React Native tarjoaa. Voit käyttää sitä luomaan sulavia animaatioita, jotka vastaavat käyttäjän vuorovaikutukseen tai tilan muutoksiin.

Animated API: n avulla voit luoda animoituja arvoja, joita voit interpoloida ja yhdistää komponenttien eri tyyliominaisuuksiin. Voit sitten päivittää näitä arvoja ajan myötä käyttämällä erilaisia ​​animaatiomenetelmiä. Komponenttien tyylit päivittyvät animoitujen arvojen muuttuessa, mikä johtaa sujuvaan animaatioon.

Animaatio toimii todella hyvin React Nativen asettelujärjestelmän kanssa. Tämän vuoksi animaatiosi integroidaan kunnolla muuhun käyttöliittymään, jotta ne näyttävät entistä paremmilta.

Jotta voit aloittaa Animatedin käytön React Native -projektissasi, sinun on tuotava Animoitu moduuli kohteesta "reagoiva syntyperäinen' koodiisi:

tuonti { Animoitu } alkaen'react-native';

Kun Animated on tuotu, voit aloittaa animaatioiden luomisen. Voit tehdä tämän luomalla ensin animoitu arvo, jota muokkaat animaation aikana:

konst animatedValue = Uusi Animoitu. Arvo(0);

The Animoitu. Arvo on React Native Animated API: n luokka, joka edustaa muuttuvaa arvoa. Voit alustaa sen alkuarvolla ja päivittää sen sitten ajan mittaan käyttämällä erilaisia ​​animoidun API: n tarjoamia animaatiomenetelmiä, kuten .ajoitus(), .kevät(), ja .hajoaminen (), määrittämällä animaation keston, helpotustoiminnon ja muut parametrit.

Animoitu arvo on samanlainen kuin React-komponentin tila-arvo.

Voit alustaa Animoitu. Arvo komponentin alkutila-arvolla ja päivitä se sitten ajan myötä käyttämällä setState menetelmä.

Sinulla on esimerkiksi komponentti, jolla on tila-arvo Kreivi, joka ilmaisee, kuinka monta kertaa käyttäjä on napsauttanut kyseistä painiketta.

Voit luoda an Animoitu. Arvo ja alusta se alkutilan arvolla Kreivi:

konst Sovellus = () => {
konst [count, setCount] = useState(0);
konst animatedValue = Uusi Animoitu. Arvo (luku);
};

Sitten aina kun Kreivi valtion arvopäivitykset, voit päivittää animatedValue liian:

konst HandbuttonNapsauta = () => {
 setCounter (count + 1);
 Animated.timing (animatedValue, {
 toValue: count + 1,
 kesto: 500,
 useNativeDriver: totta
 }).alkaa();
};

Tämä esimerkki päivittyy animatedValue käyttämällä Animated.timing() menetelmää aina, kun käyttäjä napsauttaa painiketta. The animatedValue ohjaa animaatiota, ja se muuttaa arvoa yli 500 millisekunnissa.

Suhtautumalla Animoitu. Arvo tila-arvoon tällä tavalla, voit luoda animaatioita, jotka reagoivat komponentin tilan muutoksiin.

Nyt ymmärrät kuinka animoitua arvoa muokataan. Voit sitten siirtyä Interpoloi animoitu arvo ja kartoittaa sen komponentin tyyliominaisuuteen käyttämällä Animated.interpolate() menetelmä.

Esimerkiksi:

konst opacity = animatedValue.interpolate({
 inputRange: [0, 1],
 lähtöalue: [0, 1]
});
palata (

 {/* komponenttisisältösi */}
 </View>
);

Tämä luo animaation, joka hiipuu vähitellen Näytä komponenttia, kun animoitu arvo muuttuu 0:sta 1:ksi.

Animaatiotyyppien ymmärtäminen

Animaatiotyyppien ja niiden toimintatavan ymmärtäminen on tärkeää hyvien animaatioiden luomiseksi.

Käyttämällä käytäNativeDriveria Animated-vaihtoehto parantaa suorituskykyä. Tämän vaihtoehdon avulla voit siirtää animaatioita alkuperäiseen käyttöliittymäsäikeeseen. Se voi parantaa merkittävästi suorituskykyä vähentämällä tarvittavan JavaScript-käsittelyn määrää.

Kaikki animaatiotyypit eivät kuitenkaan tue alkuperäistä ohjainta. Yritetään käyttää alkuperäistä ohjainta animaatioiden kanssa, jotka sisältävät värejä tai asettelun muutoksia, voi aiheuttaa odottamatonta toimintaa.

Lisäksi monimutkaisia ​​sekvenssejä sisältävät animaatiot voivat aiheuttaa merkittäviä suorituskykyongelmia laitteissa, joiden prosessointiteho tai muisti on rajoitettu. Nämä suorituskyvyn puutteet voivat myös olla merkittäviä, jos React Native -projektissasi on alempi versio, joka ei toimi tukee Hermes-moottoria.

Eri animaatiotyyppien vahvuuksien ja rajoitusten ymmärtäminen voi auttaa sinua valitsemaan käyttötapaukseesi sopivan lähestymistavan.

Tunne olosi mukavaksi React Native -animaatioilla

Animaatiot ovat tehokas työkalu kiinnostavien ja dynaamisten käyttöliittymien luomiseen React Native -sovelluksissa. Animated API tarjoaa joustavan ja tehokkaan tavan luoda sekä yksinkertaisia ​​että monimutkaisia ​​sarjaanimaatioita.

On kuitenkin tärkeää ottaa huomioon animaatioiden tehokkuus ja valita tilanteeseesi sopiva lähestymistapa ja kirjasto.