Darbo su animacijomis „React Native“ pradžia

Animacijos gali įkvėpti programai gyvybės ir padaryti ją patrauklesnę bei intuityvesnę vartotojui. Tačiau jei nesate naujokas „React Native“ animacijos, pradėti gali būti šiek tiek bauginantis.

Naršykite „React Native“ animacijas ir sužinokite, kaip galite pradėti kurti gražias, sklandžias animacijas.

Kaip veikia pagrindinės reakcijos vietinės animacijos?

Animacijos gali sukurti sklandų perėjimą tarp skirtingų ekranų ar elementų. Jie gali pabrėžti informaciją arba pateikti atsiliepimų apie vartotojo veiksmus. Animacijos gali būti paprastos arba sudėtingos ir gali būti naudojamos įvairios technikos, pvz., 2D arba 3D judesio grafika.

Dėl „React Native“ perkeliamumo verta jį naudoti jei taikote pagal kelias platformas. Viena stipriausių jo savybių yra galimybė kurti gražias animacijas programėlėms mobiliesiems.

Galite animuoti „React Native“ objektą tiesiog pakeisdami norimo komponento padėties būseną.

Pavyzdžiui:

importuoti





instagram viewer
 Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { Rodinys, stiliaus lapas } iš'react-native';
konst Programa = () => {
// Inicijuoti būseną, kad būtų galima stebėti dėžutės padėtį
konst [boxPosition, setBoxPosition] = useState(0);
// Naudokite kabliuką useEffect, kad kas 1 sekundę atnaujintumėte dėžutės padėtį
 useEffect (() => {
konst intervalas = setInterval(() => {
// Atnaujinkite langelio padėtį, pridėdami 10 prie dabartinės padėties
 setBoxPosition(prevPozicija => prevPosition + 10);
 }, 1000);
// Grąžina valymo funkciją, kad išvalytumėte intervalą, kai komponentas
// atsijungia
grąžinti() => clearInterval (intervalas);
 }, []);
// Nustatykite dėžutės padėtį naudodami būsenos kintamąjį eilutiniame stiliuje
konst boxStyle = {
 transformuoti: [{ išverstiY: boxPosition }]
 };
grąžinti (


 </View>
 );
};
konst styles = StyleSheet.create({
 konteineris: {
 lankstus: 1,
 lygiuoti elementus: 'centras',
 JustifyContent: 'centras',
 },
 dėžė: {
 plotis: 100,
 aukštis: 100,
 fono spalva: 'mėlyna',
 },
});
eksportuotinumatytas Programėlė;

Šis kodas pateikia mėlyną langelį, kuris kas sekundę juda žemyn. Animacija veikia naudojant naudojimoEfektas kabliukas, kad sukurtumėte laikmatį, kuris atnaujina dėžutės padėtis būsenos kintamasis kas 1 sekundę.

Nors kai kuriose situacijose tai gali būti naudinga, tai nėra geriausias pasirinkimas. Būsenos naujinimai sistemoje „React Native“ veikia asinchroniškai, tačiau norint tinkamai veikti, animacijos priklauso nuo sinchroninių būsenų atnaujinimų. Įdiegus animaciją asinchroniškai būsenos naujinimai nebus iš karto atspindėti komponento pateiktoje išvestyje, o tai sujauks animacijos laiką.

Tai kelios animacijos bibliotekos, tokios kaip Animuoti biblioteka, reaguoti-gimtoji-reanimuoti, ir react-native-animative kuriant našias animacijas „React Native“. Kiekviena iš šių animacijos bibliotekų pašalina asinchroninių būsenų atnaujinimų problemą ir yra ideali.

„React Native Animated“ API

Animated yra API, kurią teikia „React Native“. Galite naudoti jį norėdami sukurti sklandžią animaciją, kuri reaguoja į vartotojo sąveiką ar būsenos pokyčius.

Animuota API leidžia kurti animuotas vertes, kurias galite interpoliuoti ir susieti su įvairiomis komponentų stiliaus savybėmis. Tada galite atnaujinti šias reikšmes laikui bėgant naudodami įvairius animacijos metodus. Komponentų stiliai bus atnaujinti keičiantis animacinėms reikšmėms, todėl animacija bus sklandi.

Animacija tikrai gerai veikia su „React Native“ išdėstymo sistema. Dėl šios priežasties jūsų animacijos bus tinkamai integruotos su likusia vartotojo sąsaja, kad vaizdas būtų dar geresnis.

Norėdami pradėti naudoti Animated savo React Native projekte, turite importuoti Animuoti modulis iš "react-native“ į savo kodą:

importuoti { Animuotas } iš'react-native';

Importuodami animaciją galite pradėti kurti animacijas. Norėdami tai padaryti, pirmiausia sukurkite animuotą vertę, kuria manipuliuosite animacijos metu:

konst animatedValue = naujas Animuoti. Reikšmė(0);

The Animuoti. Vertė yra „React Native Animated“ API klasė, kuri reiškia kintamą vertę. Galite inicijuoti jį pradine verte ir laikui bėgant atnaujinti naudodami įvairius animacijos metodus, kuriuos teikia animacinė API, pvz., .laikas (), .pavasaris()ir .skilimas (), nurodant animacijos trukmę, lengvinimo funkciją ir kitus parametrus.

Animuota reikšmė yra panaši į būsenos reikšmę React komponente.

Galite inicijuoti an Animuoti. Vertė su pradine komponento būsenos reikšme ir laikui bėgant atnaujinkite ją naudodami setState metodas.

Pavyzdžiui, turite komponentą, kuris turi būsenos reikšmę skaičiuoti, kuris rodo, kiek kartų naudotojas spustelėjo tą mygtuką.

Galite sukurti an Animuoti. Vertė ir inicijuokite jį pradine būsenos reikšme skaičiuoti:

konst Programa = () => {
konst [count, setCount] = useState(0);
konst animatedValue = naujas Animuoti. Vertė (skaičius);
};

Tada, kai tik skaičiuoti būsenos vertės atnaujinimus, galite atnaujinti animatedValue taip pat:

konst HandbuttonSpustelėkite = () => {
 setCounter (skaičius + 1);
 Animated.timing (animatedValue, {
 toValue: skaičius + 1,
 trukmė: 500,
 useNativeDriver: tiesa
 }).start();
};

Šis pavyzdys atnaujinamas animatedValue naudojant Animated.timing() metodas, kai vartotojas spustelėja mygtuką. The animatedValue valdo animaciją ir keičia vertę per 500 milisekundžių.

Santykiaujant Animuoti. Vertė Tokiu būdu į būsenos vertę galite kurti animacijas, kurios reaguoja į komponento būsenos pokyčius.

Dabar jūs suprantate, kaip manipuliuoti animuota verte, tada galite pereiti prie interpoliuoti animuotą vertę ir susieti ją su komponento stiliaus savybe, naudodami Animated.interpolate() metodas.

Pavyzdžiui:

konst neskaidrumas = animatedValue.interpolate({
 inputRange: [0, 1],
 išvesties diapazonas: [0, 1]
});
grąžinti (

 {/* jūsų komponento turinys */}
 </View>
);

Taip bus sukurta animacija, kuri palaipsniui išnyks Žiūrėti komponentas, kai animacinė reikšmė keičiasi nuo 0 iki 1.

Animacijos tipų supratimas

Norint sukurti gerą animaciją, svarbu suprasti animacijos tipus ir jų veikimą.

Naudojant useNativeDriver parinktis su animuotu pagerina našumą. Ši parinktis leidžia perkelti animaciją į savąją vartotojo sąsajos giją. Tai gali žymiai pagerinti našumą sumažindama reikalingo JavaScript apdorojimo kiekį.

Tačiau ne visi animacijos tipai palaiko savąją tvarkyklę. Bandymas naudoti savąją tvarkyklę su animacijomis, kuriose yra spalvų ar išdėstymo pakeitimų, gali sukelti netikėtą elgesį.

Be to, animacijos, apimančios sudėtingas sekas, gali sukelti didelių našumo problemų įrenginiuose, kurių apdorojimo galia ar atmintis yra ribota. Šie našumo trūkumai taip pat gali būti pastebimi, jei jūsų „React Native“ projekte veikia senesnė versija, kuri neveikia palaiko „Hermes“ variklį.

Įvairių animacijos tipų privalumų ir apribojimų supratimas gali padėti pasirinkti tinkamą jūsų naudojimo būdą.

Jauskitės patogiai naudodami „React Native“ animaciją

Animacijos yra galingas įrankis kuriant patrauklias ir dinamiškas vartotojo sąsajas „React Native“ programose. Animuota API suteikia lankstų ir našų būdą kurti paprastas ir sudėtingas sekos animacijas.

Vis dėlto svarbu atsižvelgti į animacijos poveikį našumui ir pasirinkti tinkamą metodą bei biblioteką, kurią naudosite jūsų situacijai.