在 React Native 中解析没有分数的动画值

在 React Native 中将动画值解析为整数

使用动画 API 和 React Hooks 进行 React Native

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

替代解决方案：使用外部库进行解析

React Native 与 Reanimated 库

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

有关在 React Native 中解析动画值的常见问题

1. 将动画值转换为整数的最佳方法是什么？
2. 理想的方法是使用 interpolate() 和 toFixed(0) 将整数四舍五入到最接近的整数。
3. 为什么会 Number.parseInt() 不支持动画值？
4. 在 React Native 中，需要使用以下技术来更改动画值 interpolate() 而不是直接使用处理 Number.parseInt()。
5. 能 Reanimated 用于处理动画中的整数值？
6. 是的，与 Reanimated，你可以利用 useSharedValue() 和 17 号 平滑地处理和显示整数值。
7. 什么是 interpolate() 在这种情况下使用？
8. interpolate() 将动画值映射到可配置的输出范围，允许将它们格式化为整数，同时保留动画。
9. 使用 React Native 的性能有什么区别吗 Animated API 和 Reanimated？
10. 是的， Reanimated 由于优化的动画处理和共享数据，为复杂的动画提供了更高的性能。

在 React Native 中解析动画值的关键要点

在构建具有动态显示的用户界面时，将动画值转换为整数至关重要。使用类似的方法 插（） 允许无缝转换，所显示的数字中没有分数。

使用 复活 库允许开发人员更有效地管理动画，从而提高性能和控制。选择适当的方法取决于动画的复杂性和所需的精度水平。