Animated.spring() metodo naudojimas dinaminėms animacijoms programoje „React Native“.

„React Native“ animacinė API biblioteka gali padėti sukurti dinamišką, sklandžią animaciją be pastangų.

Sužinokite, kaip kurti animacijas su pavasario efektu, tada sužinokite, kaip valdyti jų trukmę ir greitį bei pritaikyti jas realiame pasaulyje.

Kas yra dinaminės animacijos?

Dinaminės animacijos yra animacijos, kuriose animuotų objektų judesiai nėra iš anksto užprogramuoti. Galite juos pradėti reaguodami į vartotojo sąveiką arba aplinkos pokyčius. Ši technika yra populiariausia vaizdo žaidimų animacija, socialinės žiniasklaidos programos ar kitos interaktyvios medijos formos.

Dinaminė animacija gali suteikti naudotojams labiau įtraukiančios ir patrauklesnės patirties, nes leidžia atlikti nenuspėjamus ir reaguojančius judesius, kurie gali keistis dėl kelių veiksnių.

Animacijos programose mobiliesiems bėgant metams tapo vis sudėtingesnės. Numatytoji „React Native“ animuota API buvo patobulinta, kad atitiktų šiuos sudėtingumus. The

Animuotas.pavasaris() API teikiamas metodas gali animuoti „React Native“ objektus ir sukurti dinaminį efektą.

Animacijos valdymas

Kai naudojate Animuotas.pavasaris() metodu, turėsite valdyti animaciją, kad įsitikintumėte, jog ji veikia taip, kaip norite. Animated pateikia metodų rinkinį, skirtą rankiniu būdu valdyti ir valdyti „React Native“ animacijas.

Vienas iš tų metodų yra sustabdyti(), todėl animacija sustabdoma dabartine verte. Šis metodas yra naudingas, kai reikia atšaukti animaciją arba iš naujo nustatyti jos pradinę būseną.

Pavyzdžiui:

konst stopAnimacija = () => {
 position.stop(vertė => {
 position.setValue(0);
 });
};

Atkreipkite dėmesį, kaip galite naudoti setValue() būdas iš naujo nustatyti pozicijos vertę į pradinę būseną 0.

Kitas jums prieinamas būdas yra iš naujo (), kuris grąžina animaciją į pradinę būseną. Šis metodas yra naudingas, kai reikia iš naujo paleisti animaciją.

Realaus pasaulio programos

Galite ištirti praktinį naudojimą Animuotas.pavasaris() metodas sukuria paprastą animaciją. Apvalus rutulys nukris į paviršių, kai vartotojas su juo sąveikaus, tada atšoks tiesiai į orą. Jau turėtumėte turėti react Native projektą, su kuriuo galite dirbti.

Pirmiausia sukurkite būsenos kintamąjį, kad galėtumėte stebėti rutulio padėtį:

importuoti Reaguoti, { useState } iš'reaguoti';
importuoti { Animuotas } iš'react-native';
konst Programa = () => {
konst [pozicija, setPosition] = useState(naujas Animuoti. Reikšmė(0));

grąžinti (
transformuoti: [{ išverstiY: pozicija }] }}>
 {/* Kamuolio komponentas čia */}
 </Animated.View>
 );
};

Naudokite Animuoti. Vertė sukurti būsenos kintamąjį, vadinamą padėtis kuris stebės vertikalią rutulio padėtį. Apvyniokite Žiūrėti komponentas viduje Animuoti. Žiūrėti kad galėtumėte jai pritaikyti animaciją.

Tada sukurkite animacijos funkciją, kuri privers rutulį nukristi ir atšokti aukštyn:

konst startAnimation = () => {
 Animated.spring (pozicija, {
 vertinti: 300,
 trintis: 1,
 įtampa: 10,
 useNativeDriver: tiesa,
 }).start(() => {
 Animated.spring (pozicija, {
 vertinti: 0,
 trintis: 1,
 įtampa: 10,
 useNativeDriver: tiesa,
 }).start();
 });
};

Naudokite Animuotas.pavasaris() sukurti animaciją, kuri perkels rutulį iš pradinės padėties 0 į galutinę 300 padėtį. Nurodykite trintis ir įtampa reikšmės, skirtos kontroliuoti kamuoliuko atšokimo efektą nustatymo metu useNativeDriver į tiesa pagerinti našumą.

Tada galite įdiegti kodą, kad suaktyvintumėte animaciją, kai vartotojas sąveikauja su kamuoliu:

grąžinti (

transformuoti: [{ išverstiY: pozicija }] }}>
 {/* Kamuolio komponentas čia */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Šis kodas apgaubia Animuoti. Žiūrėti komponentas viduje Liečiamas be atsiliepimų kad animacija įsijungtų, kai vartotojas paspaudžia rutulį. Taip pat galite suaktyvinti animaciją, kai komponentas pritvirtinamas, skambindami startAnimation() funkcija „React“ viduje useEffect() kabliukas.

Naudodami šį kodą turėtumėte sukurti krintančio kamuolio animaciją Animuotas.pavasaris().

Dinaminės animacijos „React Native“.

Matėte, kaip sukurti krintančio kamuoliuko animaciją naudojant Animated.spring(), tačiau yra daug kitų būdų, kaip galite ją naudoti kurdami dinamines animacijas.

Pavyzdžiui, galite naudoti Animated.spring(), kad sukurtumėte animacijas, imituojančias kitus fizikos judesius, pvz., siūbuojančius ar besisukančius objektus.

Sujungę Animated.spring() su kitomis animacijos funkcijomis, tokiomis kaip Animated.timing() arba Animated.sequence(), galite sukurti sudėtingas ir vientisas animacijas, kurios pagerina vartotojo patirtį.