Kuidas luua React Native'is pidevat animatsiooni, kasutades Animated.loop()

Üks React Native'i animeeritud API põhifunktsioone on Animated.loop() meetod, mille abil saate luua pidevat animatsiooni, mis kordub lõputult.

Uurime, kuidas kasutada meetodit Animated.loop() pideva animatsiooni loomiseks rakenduses React Native, ning õpime, kuidas neid animatsioone kohandada ja täiustada.

Animated.loop() meetodi mõistmine

Animated.loop() meetodi kasutamiseks peate esmalt looma Animeeritud. Väärtus objektiks. Seda väärtust värskendatakse animatsioonitsükli igal kaadris ja seda kasutatakse sihtkomponendi animeerimiseks.

Ükskord animeeritud. Väärtusobjekt on loodud, saate selle edastada meetodile Animated.loop() koos animatsiooni konfiguratsiooniobjektiga, mis määrab animatsiooni käitumise.

See konfiguratsiooniobjekt võib sisaldada selliseid omadusi nagu kestus, leevendamineja viivitus, mis määravad, kuidas animatsioon käitub.

Animatsiooni loomine

Vaikimisi loob meetod Animated.loop() animatsioonist lõpmatu tsükli, mis tähendab, et animatsioon kordub seni, kuni see käsitsi peatatakse. Siiski saate määrata animatsioonitsükli kestuse, määrates

iteratsioonid atribuut animatsiooni konfiguratsiooniobjektis.

Järgmine näide, mis näitab, kuidas kasutada Animation.loop() tsükliga pöörlemisanimatsiooni loomiseks:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { Style Sheet, View, Animated, Image } alates'react-native';
eksportidavaikimisifunktsiooniRakendus() {
konst [spinValue] = useState(uus Animeeritud. Väärtus(0));
 useEffect(() => {
konst spin = spinValue.interpolate({
 inputRange: [0, 1],
 väljundvahemik: ['0deg', "360 kraadi"],
 });
 Animated.loop(
 Animated.timing(
 spinValue,
 {
 hindama: 1,
 kestus: 2000,
 useNativeDriver: tõsi,
 }
 )
 ).start();
 }, []);
tagasi (

 style={{ laius: 200, kõrgus: 200, teisendada: [{ pöörata: spinValue }] }}
 allikas={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
konst styles = StyleSheet.create({
 konteiner: {
 paindumine: 1,
 joonda üksused: 'Keskus',
 õigustaSisu: 'Keskus',
 },
});

Selles näites loome animeeritud. Väärtusobjekt kutsus spinValue ja määrake selle algväärtuseks 0. Seejärel helistame loop () meetodil Animated.timing() objekt, mis võtab argumendiks oleku spinValue. Objekt Animated.timing() kirjeldab, kuidas animatsioon aja jooksul edeneb ja sel juhul pöörab see pilti 360 kraadi.

Silmuse kestuse määramiseks oleme läbinud a kestus atribuut objektile Animated.timing(), mis määrab, kui kaua animatsioon enne silmuse loomist kestab. Seadsime kestuse atribuudiks 2000, mis tähendab 2 sekundit enne taaskäivitamist.

Samuti saate määrata, mitu korda animatsioon peaks korduma, jättes iteratsioonid meetodi loop() omadus.

Oletagem näiteks, et soovite, et animatsioon korduks viis korda enne peatumist. Sel juhul saate funktsiooni Animated.loop() kutsuda iteratsioonid: 5. Kui soovite, et animatsioon püsiks lõputult, võite selle välja jätta iteratsioonid vara täielikult.

Kasutades Animation.loop(), määrates selle kestuse ja CSS-stiili õige rakendamine tagastatud vaateobjektile, saate React Native'is luua sujuvaid silmusanimatsioone.

Keerulise animatsiooniga töötamine

Keerulise animatsiooniga töötamine ei ole nii lihtne kui ühe animatsiooniga töötamine. Tavaliselt nõuavad nad veidi rohkem tööd, et tagada nende ootuspärane käitumine.

Siin on kaks näpunäidet, mis aitavad teil React Native'is keerulisi animatsioone luua.

1. Jagage animatsioon väiksemateks osadeks

Saate jaotada keerulised animatsioonid väiksemateks ja lihtsamateks animatsioonideks, mida saab eraldi silmuseid luua. Näiteks keeruka animatsiooni, mis hõlmab nii pööramist kui ka tõlkimist, saab jaotada kaheks eraldi animatsiooniks, mida silmustatakse iseseisvalt. Jagades animatsiooni väiksemateks osadeks, saate koodi lihtsustada ja muuta selle käsitsemise lihtsamaks.

2. Kasutage Animated.sequence() meetodit

The Animeeritud.sequence() meetod võimaldab teil käivitada animatsioonide jada üksteise järel. Selle meetodi abil saab luua keerulisi silmusanimatsioone, aheldades üheahelalisi animatsioone. Funktsiooni Animated.sequence() abil saate luua animatsiooni, mis esmalt pildil tuhmub, pöörab seda ja seejärel tuhmub, korrates kogu järjestust, kui see on tehtud.

Need näpunäited on koos üldised näpunäited React Native'i rakenduste optimeerimiseks aitaks teil luua toimivaid silmusanimatsioone.

Katsetage oma animatsiooniga

React Native'i silmusanimatsioonid võivad olla võimas tööriist kaasahaaravama ja dünaamilisema kasutuskogemuse loomiseks. Silmusanimatsioonide loomiseks peaksite katsetama erinevaid tehnikaid, et saavutada nii visuaalselt atraktiivne kui ka tulemuslik animatsioon.