Analyse de valeurs animées dans React Native sans fractions

Comprendre comment analyser les valeurs animées dans React Native

Réagissez aux autochtones Animé L'API fournit de puissants outils d'animation, permettant aux développeurs de créer des transitions fluides et des visuels dynamiques. Cependant, un problème fréquemment rencontré par les développeurs est celui de la structuration de la sortie des valeurs animées.

Lorsque vous travaillez avec Animated.Text, les valeurs peuvent parfois inclure des entiers fractionnaires, ce qui peut ne pas être souhaité pour tous les scénarios d'utilisation. Par exemple, la présentation de valeurs entières plutôt que de fractions est une exigence typique, en particulier pour les barres de progression et les indications de volume.

Cet article montrera comment interpréter les données animées dans React Native et les formater sous forme d'entiers. Nous examinerons un exemple de la manière dont vous pouvez utiliser ces idées pour résoudre les problèmes d'analyse typiques.

Nous examinerons également des alternatives, telles que l'utilisation d'autres bibliothèques ou méthodologies, pour obtenir le résultat requis si le module intégré API animée ne fonctionne pas correctement.

Optimisation de l'analyse des valeurs animées dans React Native

Les exemples de code ci-dessus montrent comment interpréter et afficher des valeurs animées sous forme d'entiers dans React Native avec le Animé API. Dans le premier exemple, nous avons utilisé les méthodes « Animated.sequence() » et « Animated.timing() » de React Native pour animer un nombre entre des niveaux prédéterminés. Cette séquence d'animation actualise une valeur de référence, qui est ensuite affichée à l'aide du composant « Animated.Text ». Cependant, les valeurs animées sont généralement renvoyées sous forme de nombres à virgule flottante, ce qui rend difficile leur conversion en nombres entiers.

La solution consiste à utiliser 'interpolate()' et 'toFixed(0)' pour garantir que les nombres d'animation sont arrondis à l'entier le plus proche avant d'être affichés. L'interpolation est très utile dans ce cas car elle nous permet de mapper la plage d'entrée de l'animation (par exemple, 0 à 1 000) sur une plage de sortie définie. Cela garantit que nos valeurs restent dans la plage correcte tout en passant de manière transparente entre les niveaux. L'utilisation de 'toFixed(0)' définit la précision décimale à zéro, arrondissant essentiellement le nombre à un nombre entier.

La deuxième solution utilise le Réanimé package, qui fournit une API plus complète pour gérer les animations dans React Native. Reanimated inclut des hooks tels que « useSharedValue() » et « useAnimatedStyle() » qui permettent des animations plus efficaces et plus réactives. Dans cette méthode, nous mettons à jour la valeur animée en chaînant les fonctions « withSequence() » et « withTiming() » pour fournir des transitions fluides entre les états. Le principal avantage ici est l'optimisation des performances fournie par Reanimated, en particulier lorsque vous travaillez avec des animations plus complexes.

Dans les deux cas, la gestion des erreurs et l’optimisation des performances sont essentielles. Nous veillons à ce que les animations fonctionnent efficacement en ignorant le pilote natif (car nous avons affaire à des propriétés non transformées comme le texte) et en enchaînant les animations dans une série. De plus, toutes les valeurs animées sont gérées dans le cycle de vie de React à l'aide de « useRef() » et « useEffect() ». Cela garantit que les animations démarrent et se mettent à jour correctement lorsque le composant est installé ou mis à jour. Les deux approches sont modulaires et réutilisables, ce qui les rend appropriées pour toute application nécessitant des nombres animés fluides et non fractionnaires.

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

Simplifier l'analyse des valeurs animées dans React Native

Travailler avec des animations dans Réagir natif, en particulier dans les composants comme Animated.Text, nécessite une gestion appropriée des valeurs de sortie. Bien que React Native Animated L'API offre des fonctionnalités d'animation étendues. Dans certains cas, les valeurs animées donnent lieu à des nombres à virgule flottante. Ces valeurs fractionnaires peuvent poser problème dans les situations où seuls des nombres complets sont requis, comme des barres de progression ou des compteurs. Pour surmonter ce problème, les développeurs ont besoin de moyens de convertir ou d'arrondir les données animées tout en conservant la fluidité de l'animation.

Une option consiste à utiliser le interpolation technique, qui mappe les plages d’entrée de valeurs animées à une plage de sortie, vous donnant ainsi le contrôle sur la façon dont la valeur animée est affichée. En combinant les plages de sortie avec toFixed(0), nous garantissons que la valeur présentée dans le Animated.Text est toujours un entier. Cette combinaison préserve l'intégrité de l'animation tout en garantissant une sortie conviviale et visuellement précise.

De plus, en utilisant des bibliothèques telles que Reanimated permet une plus grande flexibilité lors du traitement des données animées. Reanimated prend en charge des animations plus efficaces et déclaratives que l'API intégrée de React Native, ce qui en fait le choix idéal pour la gestion d'animations compliquées. En utilisant shared values et fonctionne comme withTiming et withSequence permet aux développeurs d'améliorer les performances, de minimiser la latence et d'obtenir un contrôle plus précis sur l'animation et sa sortie.