如何强制 React Native Animated.timing 仅使用整数？

Question

我只需要强制使用初始 Animated.Value() 和 toValue 之间的值范围内的整数。

如果有其他此类动画的库，对于我的情况就足够了。

this myValues = React.useRef(new Animated.Value(0)).current;

      Animated.timing(this.myValues, {
        duration: 2000,
        toValue: 500,
        easing: Easing.ease,
        useNativeDriver: false,
        delay: 0,
      }),

从 0 到 500 我只想要整数。可以吗？

Answer 1

import React, { useRef, useEffect, useState } from "react";
import { View, Animated, Text } from "react-native";

const App = () => {
// Step 1: Create the Animated.Value
 const animatedValue = useRef(new Animated.Value(0)).current;
 const [displayValue, setDisplayValue] = useState(0);

  useEffect(() => {
    // Step 2: Define the animation
 Animated.timing(animatedValue, {
  toValue: 500,
  duration: 2000,
  easing: Easing.ease,
  useNativeDriver: false,
}).start();

// Step 3: Add a listener to round the value and update state
const id = animatedValue.addListener(({ value }) => {
  setDisplayValue(Math.round(value));
});

// Cleanup listener on unmount
return () => {
  animatedValue.removeListener(id);
};
}, [animatedValue]);

 return (
   <View>
    {/* Step 4: Use the rounded value in your render */}
    <Text>Value: {displayValue}</Text>
  </View>
  );
};

 export default App;