Animeeritud väärtuste sõelumine React Native'is ilma murdudeta

Animeeritud väärtuste sõelumine React Native'is

Reage Native's Animeeritud API pakub tugevaid animatsioonitööriistu, mis võimaldavad arendajatel luua sujuvaid üleminekuid ja dünaamilisi visuaale. Üks probleem, millega arendajad sageli kokku puutuvad, on aga animeeritud väärtuste väljundi struktureerimine.

Kui töötate rakendusega Animated.Text, võivad väärtused mõnikord sisaldada murdosa täisarve, mis ei pruugi kõigi kasutusstsenaariumide puhul olla soovitavad. Näiteks täisarvude esitamine murdude asemel on tüüpiline nõue, eriti edenemisribade ja helitugevuse näidikute puhul.

See postitus näitab, kuidas tõlgendada animeeritud andmeid rakenduses React Native ja vormindada need täisarvudena. Vaatame näidet selle kohta, kuidas saate neid ideid tüüpiliste sõelumisprobleemide lahendamiseks kasutada.

Samuti uurime alternatiive, näiteks teiste teekide või metoodikate kasutamist, et saada vajalik väljund, kui sisseehitatud Animeeritud API ei tööta korralikult.

Animeeritud väärtuste parsimise optimeerimine rakenduses React Native

Ülaltoodud koodinäited näitavad, kuidas tõlgendada ja kuvada animeeritud väärtusi täisarvudena funktsioonis React Native with the Animeeritud API. Esimeses näites kasutasime arvu animeerimiseks etteantud tasemete vahel React Native'i meetodeid „Animated.sequence()” ja „Animated.timing()”. See animatsioonijada värskendab võrdlusväärtust, mis seejärel kuvatakse komponendi „Animated.Text” abil. Animeeritud väärtused tagastatakse aga tavaliselt ujukomaarvudena, mistõttu on nende täisarvudeks teisendamine keeruline.

Lahendus hõlmab 'interpolate()' ja 'toFixed(0)' kasutamist tagamaks, et animatsiooninumbrid ümardatakse enne kuvamist lähima täisarvuni. Interpoleerimine on sel juhul väga kasulik, kuna see võimaldab meil kaardistada animatsiooni sisendvahemiku (näiteks 0 kuni 1000) määratletud väljundvahemikuga. See tagab, et meie väärtused jäävad õigesse vahemikku, liikudes samal ajal sujuvalt tasemete vahel. Funktsiooni „toFixed(0)” kasutamine seab kümnendkoha täpsuse nulliks, ümardades sisuliselt arvu täisarvuni.

Teine lahendus kasutab Reanimeeritud pakett, mis pakub põhjalikumat API-t animatsioonide käsitlemiseks rakenduses React Native. Reanimated sisaldab konkse, nagu "useSharedValue()" ja "useAnimatedStyle()", mis võimaldavad tõhusamaid ja tundlikumaid animatsioone. Selle meetodi puhul värskendame animeeritud väärtust, aheldades funktsioonid „withSequence()” ja „withTiming()”, et tagada sujuvad üleminekud olekute vahel. Peamine eelis on siin Reanimatedi pakutav jõudluse optimeerimine, eriti kui töötate keerukamate animatsioonidega.

Mõlemal juhul on veahaldus ja jõudluse optimeerimine kriitilise tähtsusega. Tagame animatsioonide tõhusa töötamise, jättes vahele algse draiveri (kuna tegemist on mitteteisendusomadustega, nagu tekst) ja aheldades animatsioone seeriasse. Lisaks hallatakse kõiki animeeritud väärtusi Reacti elutsükli jooksul, kasutades funktsioone „useRef()” ja „useEffect()”. See tagab, et animatsioonid käivituvad ja värskendatakse õigesti, kui komponent on installitud või värskendatud. Mõlemad lähenemisviisid on modulaarsed ja korduvkasutatavad, muutes need sobivaks kõigi rakenduste jaoks, mis nõuavad sujuvaid, mittefraktsionaalseid animeeritud numbreid.

import { Animated, Easing } from 'react-native';
import React from 'react';
export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = React.useRef(new Animated.Value(ML_LEVELS[0])).current;
  const ml_up_down = () => {
    Animated.sequence([
      Animated.timing(ml, {
        duration: 2000,
        toValue: ML_LEVELS[1],
        easing: Easing.bezier(0.55, 0.5, 0.45, 0.5),
        useNativeDriver: false,
      }),
      Animated.timing(ml, {
        duration: 2000,
        toValue: ML_LEVELS[2],
        easing: Easing.ease,
        useNativeDriver: false,
      }),
    ]).start();
  };
  return (
    <Animated.Text>{ml.interpolate({
      inputRange: [0, 1000],
      outputRange: ['0', '1000'],
      extrapolate: 'clamp',
    }).toFixed(0)}</Animated.Text>
  );
}

import Animated, { Easing } from 'react-native-reanimated';
import React from 'react';
export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = useSharedValue(ML_LEVELS[0]);
  const ml_up_down = () => {
    ml.value = withSequence(
      withTiming(ML_LEVELS[1], { duration: 2000, easing: Easing.bezier(0.55, 0.5, 0.45, 0.5) }),
      withTiming(ML_LEVELS[2], { duration: 2000, easing: Easing.ease })
    );
  };
  const animatedText = useAnimatedStyle(() => {
    return { text: Math.round(ml.value) };
  });
  return (
    <Animated.Text style={animatedText}></Animated.Text>
  );
}

Animeeritud väärtuste parsimise lihtsustamine rakenduses React Native

Animatsioonidega töötamine Reageerige emakeelena, eriti sellistes komponentides nagu Animated.Text, nõuab väljundväärtuste õiget käsitlemist. Kuigi React Native's Animated API pakub laialdasi animatsioonifunktsioone, on juhtumeid, kus animeeritud väärtused annavad tulemuseks ujukomaarvud. Need murdarvud võivad olla problemaatilised olukordades, kus nõutakse ainult täisarve, näiteks edenemisribad või loendurid. Selle ületamiseks nõuavad arendajad viise animeeritud andmete teisendamiseks või ümardamiseks, säilitades samal ajal animatsiooni sujuvuse.

Üks võimalus on kasutada interpolation tehnika, mis kaardistab animeeritud väärtuste sisendvahemikud väljundvahemikuks, andes teile kontrolli selle üle, kuidas animeeritud väärtust kuvatakse. Kombineerides väljundvahemikke koos toFixed(0), garanteerime, et dokumendis esitatud väärtus Animated.Text on alati täisarv. See kombinatsioon säilitab animatsiooni terviklikkuse, tagades samal ajal kasutajasõbraliku ja visuaalselt täpse väljundi.

Lisaks kasutades selliseid teeke nagu Reanimated võimaldab animeeritud andmete käsitlemisel suuremat paindlikkust. Reanimated toetab tõhusamaid ja deklaratiivsemaid animatsioone kui React Native'i sisseehitatud API, mistõttu on see ideaalne valik keeruliseks animatsioonihalduseks. Kasutades shared values ja funktsioneerib nagu withTiming ja withSequence võimaldab arendajatel parandada jõudlust, minimeerida latentsust ning saavutada täpsem kontroll animatsiooni ja selle väljundi üle.