Animoitujen arvojen jäsentäminen React Native -sovelluksessa ilman murtolukuja

Animoitujen arvojen jäsentäminen React Nativessa

React Native's Animoitu API tarjoaa vahvoja animaatiotyökaluja, joiden avulla kehittäjät voivat rakentaa saumattomia siirtymiä ja dynaamisia visuaaleja. Yksi ongelma, jonka kehittäjät kohtaavat kuitenkin usein, on animoitujen arvojen tulosteen jäsentäminen.

Kun työskentelet Animated.Textin kanssa, arvot voivat toisinaan sisältää kokonaislukuja, mikä ei välttämättä ole toivottavaa kaikissa käyttötilanteissa. Esimerkiksi kokonaislukuarvojen esittäminen murtolukujen sijaan on tyypillinen vaatimus erityisesti edistymispalkeissa ja äänenvoimakkuuden ilmaisimissa.

Tämä viesti näyttää kuinka tulkita animoituja tietoja React Nativessa ja muotoilla ne kokonaislukuina. Tarkastellaan esimerkkiä siitä, kuinka voit käyttää näitä ideoita tyypillisten jäsennyshaasteiden ratkaisemiseen.

Tutkimme myös vaihtoehtoja, kuten muiden kirjastojen tai menetelmien käyttämistä, saadaksemme tarvittavan tulosteen, jos sisäänrakennettu Animoitu API ei toimi kunnolla.

Animoitujen arvojen jäsentämisen optimointi React Nativessa

Yllä olevat koodiesimerkit osoittavat, kuinka animoituja arvoja tulkitaan ja näytetään kokonaislukuina React Native with the Animoitu API. Ensimmäisessä esimerkissä käytimme React Nativen "Animated.sequence()"- ja "Animated.timing()" -menetelmiä luvun animoimiseen ennalta määrättyjen tasojen välillä. Tämä animaatiosarja päivittää viitearvon, joka sitten näytetään Animated.Text-komponentilla. Animoidut arvot palautetaan kuitenkin yleensä liukulukuina, mikä vaikeuttaa niiden muuntamista kokonaisluvuiksi.

Ratkaisu koostuu 'interpolate()'- ja 'toFixed(0)' -funktioista sen varmistamiseksi, että animaation numerot pyöristetään lähimpään kokonaislukuun ennen näyttämistä. Interpolointi on erittäin hyödyllinen tässä tapauksessa, koska sen avulla voimme kartoittaa animaation syöttöalueen (esimerkiksi 0 - 1000) määritettyyn lähtöalueeseen. Tämä varmistaa, että arvomme pysyvät oikean alueen sisällä, samalla kun siirrymme saumattomasti tasojen välillä. "toFixed(0)" asettaa desimaalitarkkuuden nollaan ja pyöristää luvun olennaisesti kokonaislukuun.

Toinen ratkaisu käyttää Reanimoitu paketti, joka tarjoaa kattavamman sovellusliittymän animaatioiden käsittelyyn React Nativessa. Reanimated sisältää koukut, kuten "useSharedValue()" ja "useAnimatedStyle()", jotka mahdollistavat tehokkaammat ja reagoivammat animaatiot. Tässä menetelmässä päivitämme animoidun arvon ketjuttamalla "withSequence()"- ja "withTiming()"-funktiot sujuvan siirtymisen varmistamiseksi tilojen välillä. Suurin etu tässä on Reanimatedin tarjoama suorituskyvyn optimointi, etenkin kun työskentelet monimutkaisempien animaatioiden kanssa.

Molemmissa tapauksissa virheenhallinta ja suorituskyvyn optimointi ovat kriittisiä. Varmistamme animaatioiden tehokkaan toiminnan ohittamalla alkuperäisen ajurin (koska käsittelemme ei-muunnosominaisuuksia, kuten tekstiä) ja ketjuttamalla animaatiot sarjaan. Lisäksi kaikkia animoituja arvoja hallitaan Reactin elinkaaren aikana käyttämällä 'useRef()'- ja 'useEffect()'-toimintoja. Tämä takaa, että animaatiot alkavat ja päivittyvät oikein, kun komponentti asennetaan tai päivitetään. Molemmat lähestymistavat ovat modulaarisia ja uudelleenkäytettäviä, joten ne sopivat kaikkiin sovelluksiin, jotka vaativat sujuvaa, ei-murtolukua.

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>
  );
}

Animoidun arvon jäsentämisen yksinkertaistaminen React Nativessa

Työskentely animaatioiden kanssa React Native, erityisesti komponenteissa, kuten Animated.Text, vaatii lähtöarvojen asianmukaista käsittelyä. Vaikka React Nativen Animated API tarjoaa laajoja animaatioominaisuuksia, joissakin tapauksissa animoidut arvot johtavat liukulukuihin. Nämä murtoluvut voivat olla ongelmallisia tilanteissa, joissa vaaditaan vain täydet numerot, kuten edistymispalkit tai laskurit. Tämän ratkaisemiseksi kehittäjät tarvitsevat tapoja muuntaa tai pyöristää animoituja tietoja samalla, kun animaation tasaisuus säilyy.

Yksi vaihtoehto on käyttää interpolation tekniikka, joka kartoittaa animoitujen arvojen syöttöalueet lähtöalueiksi, jolloin voit hallita animoidun arvon näyttötapaa. Yhdistämällä lähtöalueet kanssa toFixed(0), takaamme, että kohdassa esitetty arvo Animated.Text on aina kokonaisluku. Tämä yhdistelmä säilyttää animaation eheyden ja varmistaa samalla käyttäjäystävällisen ja visuaalisesti tarkan tulosteen.

Lisäksi käyttämällä kirjastoja, kuten Reanimated mahdollistaa suuremman joustavuuden käsiteltäessä animoitua dataa. Reanimated tukee tehokkaampia ja selkeämpiä animaatioita kuin React Nativen sisäänrakennettu API, joten se on ihanteellinen valinta monimutkaiseen animaation hallintaan. Käyttämällä shared values ja toimii kuten withTiming ja withSequence avulla kehittäjät voivat parantaa suorituskykyä, minimoida latenssia ja saavuttaa tarkemman hallinnan animaatiosta ja sen lähdöstä.