Animatsioonidega alustamine rakenduses React Native

Animatsioonid võivad rakendusele elu sisse puhuda, muutes selle kasutaja jaoks köitvamaks ja intuitiivsemaks. Aga kui te pole React Native animatsioonidega uustulnuk, võib alustamine olla pisut hirmutav.

Avastage React Native animatsioone ja uurige, kuidas saate alustada ilusate ja sujuvate animatsioonide loomist.

Kuidas Basic Reacti omaanimatsioonid töötavad?

Animatsioonid võivad luua sujuvaid üleminekuid erinevate ekraanide või elementide vahel. Nad võivad esile tõsta teavet või anda tagasisidet kasutaja tegevuste kohta. Animatsioonid võivad olla lihtsad või keerulised ning kasutada erinevaid tehnikaid, näiteks 2D või 3D liikumisgraafikat.

React Native'i kaasaskantavus muudab selle kasutamist väärt kui sihite mitut platvormi. Üks selle tugevamaid omadusi on võimalus luua mobiilirakendustele kauneid animatsioone.

React Native objekti saab animeerida, muutes lihtsalt soovitud komponendi asukoha olekut.

Näiteks:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { Vaade, stiilileht } alates'react-native';
konst Rakendus = () => {
// Initsialiseeri olek kasti asukoha jälgimiseks
konst [boxPosition, setBoxPosition] = useState(0);
// Kasutage konksu useEffect, et värskendada kasti asukohta iga 1 sekundi järel
 useEffect(() => {
konst intervall = setInterval(() => {
// Värskendage kasti asukohta, lisades praegusele positsioonile 10
 setBoxPosition(eelpositsioon => prevPosition + 10);
 }, 1000);
// Tagastab puhastusfunktsiooni intervalli tühjendamiseks, kui komponent
// võtab lahti
tagasi() => clearInterval (intervall);
 }, []);
// Määrake kasti asukoht olekumuutuja abil tekstisiseses stiilis
konst boxStyle = {
 teisendus: [{ tõlkidaY: boxPosition }]
 };
tagasi (


 </View>
 );
};
konst styles = StyleSheet.create({
 konteiner: {
 paindumine: 1,
 joonda üksused: 'Keskus',
 õigustaSisu: 'Keskus',
 },
 kast: {
 laius: 100,
 kõrgus: 100,
 taustavärv: 'sinine',
 },
});
eksportidavaikimisi Rakendus;

See kood renderdab sinise kasti, mis liigub iga sekundi järel allapoole. Animatsioon töötab kasutades useEffect konks, et luua taimer, mis värskendab kastipositsioon olekumuutuja iga 1 sekundi järel.

Kuigi see võib mõnes olukorras toimida, pole see parim valik. React Native'i olekuvärskendused töötavad asünkroonselt, kuid animatsioonid sõltuvad korrektseks töötamiseks sünkroonsetest olekuvärskendustest. Animatsiooni asünkroonne rakendamine põhjustab selle, et olekuvärskendused ei kajastu kohe komponendi renderdatud väljundis, mis ajab teie animatsioonide ajastuse sassi.

Need on mitmed animatsiooniteegid, nagu Animeeritud raamatukogu, reageerima-native-reanimatedja reageerima-native-animable React Native'is esinevate animatsioonide loomiseks. Kõik need animatsiooniteegid vähendavad asünkroonsete olekuvärskenduste probleemi ja on täiesti ideaalsed.

React Native Animated API

Animated on API, mida React Native pakub. Saate seda kasutada sujuvate animatsioonide loomiseks, mis reageerivad kasutaja interaktsioonidele või olekumuutustele.

Animeeritud API võimaldab teil luua animeeritud väärtusi, mida saate interpoleerida ja vastendada oma komponentide erinevate stiiliomadustega. Seejärel saate neid väärtusi aja jooksul erinevate animatsioonimeetodite abil värskendada. Seejärel värskendatakse teie komponentide stiile, kui animeeritud väärtused muutuvad, mille tulemuseks on sujuvad animatsioonid.

Animeeritud töötab React Native'i paigutussüsteemiga väga hästi. Seetõttu integreeritakse teie animatsioonid korralikult ülejäänud kasutajaliidesega, et saada veelgi parem välimus.

Animatedi kasutamise alustamiseks oma React Native'i projektis peate importima faili Animeeritud moodul alates "reageeriv-native' oma koodi sisse:

importida { Animeeritud } alates'react-native';

Kui animatsioon on imporditud, saate alustada animatsioonide loomist. Selleks looge esmalt animeeritud väärtus, mida saate kogu animatsiooni jooksul manipuleerida:

konst animatedValue = uus Animeeritud. Väärtus(0);

The Animeeritud. Väärtus on klass React Native Animated API-s, mis esindab muutuvat väärtust. Saate selle lähtestada algväärtusega ja seejärel aja jooksul värskendada, kasutades erinevaid animeeritud API pakutavaid animatsioonimeetodeid, näiteks .ajastus (), .kevad ()ja .lagunemine (), määrates animatsiooni kestuse, kergendusfunktsiooni ja muud parameetrid.

Animeeritud väärtus on sarnane Reacti komponendi olekuväärtusega.

Saate initsialiseerida an Animeeritud. Väärtus komponendi algse olekuväärtusega ja seejärel värskendage seda aja jooksul, kasutades setState meetod.

Näiteks on teil komponent, millel on olekuväärtus loendama, mis näitab, mitu korda kasutaja on sellel nupul klõpsanud.

Saate luua an Animeeritud. Väärtus ja lähtestage see algoleku väärtusega arv:

konst Rakendus = () => {
konst [count, setCount] = useState(0);
konst animatedValue = uus Animeeritud. Väärtus (loendus);
};

Siis, kui loendama oleku väärtuste värskendused, saate värskendada animeeritud väärtus ka:

konst HandbuttonClick = () => {
 setCounter (loendus + 1);
 Animated.timing (animatedValue, {
 toValue: arv + 1,
 kestus: 500,
 useNativeDriver: tõsi
 }).start();
};

Seda näidet värskendatakse animeeritud väärtus kasutades Animated.timing() meetodil, kui kasutaja nuppu klõpsab. The animeeritud väärtus juhib animatsiooni ja see muudab väärtust üle 500 millisekundi.

Suhtestades Animeeritud. Väärtus Sel viisil olekuväärtusele saate luua animatsioone, mis reageerivad teie komponendi oleku muutustele.

Nüüd saate aru, kuidas animeeritud väärtust manipuleerida. Seejärel saate jätkata animeeritud väärtuse interpoleerimisega ja vastendada see oma komponendi stiiliomadusega, kasutades Animated.interpolate() meetod.

Näiteks:

konst läbipaistmatus = animatedValue.interpolate({
 inputRange: [0, 1],
 väljundvahemik: [0, 1]
});
tagasi (

 {/* teie komponendi sisu */}
 </View>
);

See loob animatsiooni, mis järk-järgult hääbub Vaade komponent, kui animeeritud väärtus muutub 0-lt 1-le.

Animatsioonitüüpide mõistmine

Animatsioonitüüpide ja nende tööpõhimõtete mõistmine on heade animatsioonide loomisel oluline.

Kasutades kasutage NativeDriveri Animeeritud valik parandab jõudlust. See suvand võimaldab teil animatsioonid oma kasutajaliidese lõime alla laadida. See võib oluliselt parandada jõudlust, vähendades nõutava JavaScripti töötlemise mahtu.

Kuid mitte kõik animatsioonitüübid ei toeta algset draiverit. Kui proovite kasutada oma draiverit animatsioonidega, mis hõlmavad värvi või paigutuse muudatusi, võib see põhjustada ootamatut käitumist.

Lisaks võivad keerulisi järjestusi sisaldavad animatsioonid põhjustada olulisi jõudlusprobleeme piiratud töötlemisvõimsuse või mäluga seadmetes. Need jõudluse puudujäägid võivad olla märgatavad ka siis, kui teie React Native'i projektis töötab vanem versioon, mis seda ei tee toetada Hermese mootorit.

Erinevate animatsioonitüüpide tugevuste ja piirangute mõistmine aitab teil valida oma kasutusjuhtumile sobiva lähenemisviisi.

Tundke end mugavalt Reacti põlisanimatsioonidega

Animatsioonid on võimas tööriist kaasahaarava ja dünaamilise kasutajaliidese loomiseks React Native'i rakendustes. Animeeritud API pakub paindlikku ja tõhusat viisi nii lihtsate kui ka keerukate jadaanimatsioonide loomiseks.

Siiski on oluline arvestada animatsioonide mõju jõudlusele ning valida oma olukorra jaoks sobiv lähenemisviis ja teek.