Hallitse pomppivaa animaatiota tämän React-kirjaston ja näiden kätevien vinkkien avulla.

React Nativen Animated API -kirjaston avulla voit luoda dynaamisia, sujuvia animaatioita pienellä vaivalla.

Opi luomaan animaatioita kevään kaltaisilla vaikutuksilla ja sitten hallitsemaan niiden kestoa ja nopeutta sekä käyttämään niitä tosielämän skenaarioissa.

Mitä ovat dynaamiset animaatiot?

Dynaamiset animaatiot ovat animaatioita, joissa animoitujen objektien liikkeitä ei ole esiohjelmoitu. Voit käynnistää ne vastauksena käyttäjän vuorovaikutukseen tai ympäristön muutoksiin. Tekniikka on suosituin videopeli animaatio, sosiaalisen median sovelluksia tai muita interaktiivisia mediamuotoja.

Dynaamiset animaatiot voivat tarjota käyttäjille mukaansatempaavamman ja kiinnostavamman kokemuksen, koska ne mahdollistavat arvaamattomia ja reagoivia liikkeitä, jotka voivat muuttua useiden tekijöiden perusteella.

Mobiilisovellusten animaatiot ovat vuosien mittaan muuttuneet yhä monimutkaisemmiksi. React Nativen animoitu oletussovellusliittymä on kehittynyt vastaamaan näihin monimutkaisiin haasteisiin. The

instagram viewer
Animoitu.kevät() API: n tarjoama menetelmä voi animoida React Native -objekteja luoden dynaamisen tehosteen.

Animaation hallinta

Kun käytät Animoitu.kevät() -menetelmällä sinun tulee hallita animaatiota varmistaaksesi, että se käyttäytyy haluamallasi tavalla. Animated tarjoaa joukon menetelmiä React Native -animaatioiden manuaaliseen ohjaamiseen ja manipulointiin.

Yksi näistä menetelmistä on lopettaa(), mikä saa animaation pysähtymään nykyiseen arvoonsa. Tämä menetelmä on hyödyllinen, kun haluat peruuttaa animaation tai palauttaa sen alkuperäiseen tilaan.

Esimerkiksi:

konst stopAnimaatio = () => {
 position.stop(arvo => {
 position.setValue(0);
 });
};

Huomaa, kuinka voit käyttää aseta arvo() menetelmä paikan arvon palauttamiseksi alkuperäiseen tilaan 0.

Toinen käytettävissäsi oleva menetelmä on reset(), joka palauttaa animaation alkuperäiseen tilaan. Tämä menetelmä on hyödyllinen, kun animaatio on käynnistettävä uudelleen.

Reaalimaailman sovellukset

Voit tutkia sen käytännön käyttöä Animoitu.kevät() menetelmää rakentamalla yksinkertainen animaatio. Pyöreä pallo putoaa pinnalle, kun käyttäjä on vuorovaikutuksessa sen kanssa, ja pomppaa sitten takaisin ilmaan. Sinulla pitäisi jo olla react Native -projekti, jonka kanssa voit työskennellä.

Luo ensin tilamuuttuja pallon sijainnin seuraamiseksi:

tuonti Reagoi, { useState } alkaen'reagoi';
tuonti { Animoitu } alkaen'react-native';
konst Sovellus = () => {
konst [position, setPosition] = useState(Uusi Animoitu. Arvo(0));

palata (
muuttaa: [{ kääntääY: sijainti }] }}>
 {/* Pallokomponentti tästä */}
 </Animated.View>
 );
};

Käyttää Animoitu. Arvo luodaksesi tilamuuttujan nimeltä asema joka seuraa pallon pystysuoraa asentoa. Kääri Näytä komponentti sisään Animoitu. Näytä joten voit käyttää siihen animaatioita.

Luo seuraavaksi animaatiotoiminto, joka saa pallon putoamaan ja pomppimaan ylös:

konst startAnimation = () => {
 Animated.spring (position, {
 arvostaa: 300,
 kitka: 1,
 jännitys: 10,
 useNativeDriver: totta,
 }).alkaa(() => {
 Animated.spring (position, {
 arvostaa: 0,
 kitka: 1,
 jännitys: 10,
 useNativeDriver: totta,
 }).alkaa();
 });
};

Käyttää Animoitu.kevät() luodaksesi animaation, joka siirtää pallon alkuasennosta 0 lopulliseen asentoon 300. Täsmentää kitka ja jännitystä arvot hallitaksesi pallon pomppimisvaikutusta asettamisen aikana käytäNativeDriveria to totta suorituskyvyn parantamiseksi.

Voit sitten ottaa käyttöön koodin käynnistääksesi animaation, kun käyttäjä on vuorovaikutuksessa pallon kanssa:

palata (

muuttaa: [{ kääntääY: sijainti }] }}>
 {/* Pallokomponentti tästä */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Tämä koodi käärii Animoitu. Näytä komponentti sisään Kosketettava ilman palautetta niin, että animaatio laukeaa, kun käyttäjä painaa palloa. Voit myös käynnistää animaation, kun komponentti kiinnittyy kutsumalla startAnimation() toiminto Reactin sisällä useEffect() koukku.

Tällä koodilla sinun pitäisi luoda putoavan pallon animaatio käyttämällä Animoitu.kevät().

Dynaamiset animaatiot React Nativessa

Olet nähnyt, kuinka putoavan pallon animaatio toteutetaan Animated.spring()-toiminnolla, mutta on monia muita tapoja, joilla voit luoda dynaamisia animaatioita.

Voit esimerkiksi käyttää Animated.spring()-funktiota animaatioiden luomiseen, jotka simuloivat muita fysiikkaan perustuvia liikkeitä, kuten keinuvia tai pyöriviä objekteja.

Yhdistämällä Animated.spring() muihin animaatiotoimintoihin, kuten Animated.timing() tai Animated.sequence(), voit luoda monimutkaisia ​​ja saumattomia animaatioita, jotka parantavat käyttökokemusta.