Kaip sukurti geriau reaguojančią vietinę animaciją

Programėlės mobiliesiems dažnai naudoja animaciją, kad pagerintų vartotojo patirtį. Tačiau sukurti aukštos kokybės animaciją gali būti iššūkis.

Laimei, yra koncepcijų ir metodų, kuriuos galite naudoti norėdami pagerinti savo animacijos įgūdžius. Tada galite juos pritaikyti, kad sukurtumėte geresnes, sklandesnes animacijas kitai „React Native“ programai mobiliesiems.

Reaguoti į vietines animacijas

The React Native Animated biblioteka yra populiariausias būdas kurti animacijas React Native programoje.

Tiesiog kaip „React“ integruota animacijos biblioteka, animuota API yra „JavaScript“ pagrindu sukurtos animacinės bibliotekos dalis. Animated suteikia klasių ir metodų rinkinį, leidžiantį kurti sklandžią ir sklandžią animaciją. Yra keletas kitų puikių „React Native“ animacijų kūrimo galimybių, pvz., „Reanimated“.

Tačiau kurti geras animacijas programoje „React Native“ – tai ne tik tinkamos bibliotekos naudojimas ar tinkamų savybių nustatymas. Taip pat svarbu suprasti animacijos principus ir kaip juos pritaikyti kuriant mobiliąsias programėles. Taigi čia yra keletas pagrindinių principų, kuriuos reikia suprasti ir įsidėmėti kuriant animaciją.

Animacijos trukmės reguliavimas

Animacijos vartotojui turi atrodyti sklandžiai ir natūraliai. Tai gali priklausyti nuo to, kaip tvarkysite tam tikrų sukurtų animacijų trukmę.

Trukmė nurodo laiką, per kurį animacija visiškai paleidžiama. Pagal numatytuosius nustatymus „React Native“ animacijos trukmė yra 500 milisekundžių, tačiau galite jas koreguoti, kad jos veiktų greičiau arba lėčiau.

Turėtumėte koreguoti animacijos trukmę pagal jos sudėtingumą. Paprastos animacijos, pvz., išblukimo, gali prireikti tik trumpos trukmės, o sudėtingesnės animacijos, pvz., įslinkimo su atšokimo efektu, gali tekti trukti ilgiau, kad ji jaustųsi natūraliai ir sklandžiai.

Su Animacija.laikas() metodu, galite sukurti pasirinktinę animaciją su laiku, kad atitiktų jūsų poreikius.

Štai pavyzdys, kaip pridėti pasirinktinę trukmę prie paprastos išnykstančios animacijos:

importuoti Reaguoti, { useRef } iš'reaguoti';
importuoti { Animuotas, vaizdas } iš'react-native';
konst FadeInView = (rekvizitai) => {
konst fadeAnim = useRef(naujas Animuoti. Reikšmė(0)).srovė; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 vertinti: 1,
 trukmė: 2000, // nustatyti pasirinktinę trukmę
 useNativeDriver: tiesa,
 }
 ).start();
 }, [fadeAnim]);
grąžinti (
 style={{
 ...rekvizitas.stilius,
 neskaidrumas: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (
lankstus: 1, sulygintiItems: 'centras', pateisintiTurinį: 'centras'}}>
plotis: 250, aukščio: 50, fono spalva: "Pwder Blue"}}>
šrifto dydis: 28, tekstas Lygiuoti: 'centras', marža: 10}}> Išblukimas in</Text>
 </FadeInView>
 </View>
 );
}

Renkantis animacijos trukmę, svarbu rasti tinkamą greičio ir sklandumo balansą.

Pirmą kartą eksperimentuodami pabandykite pradėti nuo ilgesnės trukmės. Ilgesnė trukmė suteiks daugiau laiko reguliuoti lengvinimo funkciją ir patobulinti animaciją. Visada galite sutrumpinti trukmę vėliau, kai būsite patenkinti bendru efektu.

Naudokite lengvinimo funkcijas

Paprastos animacijos gali turėti pastovų greitį, tačiau keičiant greitį galima sukurti natūralesnius efektus. Lengvinimo funkcijos valdo animacijos kitimo greitį laikui bėgant. Jie gali priversti jūsų animaciją pradėti lėtai, tada paspartinti. Animacijos eigoje nustačius skirtingą greitį galima sukurti sklandžią ir patrauklią animaciją.

Paimkite šį lengvinimo funkcijos naudojimo pavyzdį:

importuoti Reaguoti, { useRef } iš'reaguoti';
importuoti { Animuotas, vaizdas } iš'react-native';
konst FadeInView = (rekvizitai) => {
konst fadeAnim = useRef(naujas Animuoti. Reikšmė(0)).srovė; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 vertinti: 1,
 trukmė: 2000,
 palengvinimas: Animated.easeOut, // čia naudokite palengvinimo funkciją
 useNativeDriver: tiesa,
 }
 ).start();
 }, [fadeAnim]);
grąžinti (
 style={{
 ...rekvizitas.stilius,
 neskaidrumas: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (
lankstus: 1, sulygintiItems: 'centras', pateisintiTurinį: 'centras'}}>
plotis: 250, aukščio: 50, fono spalva: "Pwder Blue"}}>
šrifto dydis: 28, tekstas Lygiuoti: 'centras', marža: 10}}>Išblukti</Text>
 </FadeInView>
 </View>
 );
}

Šis kodas naudoja Animuotas.easeOut funkcija, skirta valdyti animacinio vaizdo neskaidrumo kitimo greitį Žiūrėti. The Animated.timing() metodas naudos palengvinimo funkciją, kad per dvi sekundes palaipsniui pakeistų neskaidrumą nuo 0 iki 1, kad animacija sulėtėtų, kai ji pasieks savo pabaigą.

Galite naudoti įvairių tipų lengvinimo funkcijas, kad jūsų animacijos atrodytų sklandžiau, įskaitant palengvinimą, palengvinimą ir lengvinimą.

Pasirinkus tinkamą lengvinimo funkciją, gali labai pasikeisti programos animacijos kokybė. Verta skirti šiek tiek laiko pažaisti su jais ir sužinoti, kas geriausiai tinka konkrečiais naudojimo atvejais.

Pagrindiniai kadrai padeda kurti sudėtingas animacijas

Pagrindiniai kadrai yra žymekliai, leidžiantys tiksliai nustatyti momentus animacijoje, kai norite pakeisti ypatybes, pvz., padėtį, mastelį ar pasukimą. Tai tarsi laiko taškų žymėjimas animacijai vadovauti.

Galite naudoti rinkinį pagrindinius kadrus, kad nustatytumėte konkrečias bet kurios nuosavybės vertes norite animuoti. Tai padeda valdyti laiką ir elgesį, ypač sudėtingose ​​animacijose, tokiose kaip veikėjų judėjimas.

Norėdami sukurti pagrindinę pagrindinio kadro animaciją, turėsite nurodyti pagrindinius kadrus, tarp kurių norite animuoti, ir bendrą trukmę.

Pavyzdžiui, tarkime, kad norite animuoti kvadratą nuo pradinės padėties (0, 0) iki pabaigos padėties (100, 100) per vieną sekundę.

Galite sukurti tokį pagrindinių kadrų masyvą:

konst raktiniai kadrai = [
 { x: 0, y: 0 },
 { x: 50, y: 50 },
 { x: 100, y: 100 },
];

Šiuo atveju yra trys pagrindiniai kadrai: vienas animacijos pradžioje, vienas viduryje ir vienas pabaigoje. Tada galite perduoti šį pagrindinių kadrų masyvą į savo animacijos biblioteką kartu su 1 000 milisekundžių trukme, kad sukurtumėte sklandžią animaciją tarp pagrindinių kadrų.

Kai kuriose bibliotekose taip pat turėsite nurodyti palengvinimo funkciją, kad galėtumėte valdyti animacijos eigą. Tačiau pagrindinę idėją nurodyti pagrindinius kadrus ir trukmę galite pritaikyti daugumai animacijos bibliotekų.

Pasinaudokite įrenginio pranašumais naudodami aparatinės įrangos spartinimą

Aparatinės įrangos pagreitis gali būti galingas įrankis optimizuojant „React Native“ animacijų veikimą. Naudodami įrenginio grafinę aparatinę įrangą, galite atleisti dalį apdorojimo darbų nuo procesoriaus ir, savo ruožtu, pasiekti sklandesnes, labiau reaguojančias animacijas.

Tada įrenginio GPU savaime apdoros animuotas reikšmes ir stilius, o ne „JavaScript“ giją.

Aparatinės įrangos spartinimas gali būti pasiekiamas ne visuose įrenginiuose, todėl svarbu išbandyti animacijas įvairiuose tikruose įrenginiuose, kad būtų užtikrintas geriausias našumas.