javascript - React Native - 如何舍入动画组件的值？

Question

我想使用Animated API创建文本动画，但是animated的值有小数，我想对该值进行四舍五入，可以吗？

我尝试使用 Math.round() 但输出为 NaN，

代码如下:

const AnimatedText = Animated.createAnimatedComponent(CustomText);


export default class App extends Component {
  constructor(props) {
    super(props);
    this.visited = new Animated.Value(0)
  }

  componentWillMount(){
    Animated.timing(this.visited,{
      toValue: 1,
      duration:1000,
    }).start();
  }

  render(){
    const visiting = this.visited.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 20],
    });
    return(
      <AnimatedText style={{fontSize:40, color:'white', fontWeight:'900'}}>{visiting}</AnimatedText>
    )
  }
}

Answer 1

这是因为 new Animated.Value 创建了一个自定义的 React Native 对象。如果你想获取该值，你可以停止动画并获取当前值:

this.state.visited.stopAnimation(value => console.log(Math.round(value.value)))

或者向其添加一个监听器，并在动画运行时始终获取最新值:

componentWillMount(){
    this.state.visited.addListener(value => console.log(Math.round(value.value)))
    Animated.timing(this.visited,{
      toValue: 1,
      duration:1000,
    }).start();
} 

https://facebook.github.io/react-native/docs/animations.html#responding-to-the-current-animation-value