Question

我有一个视图，我正在使用react动画和一个计时器来减少女巫在倒数计时器期间的宽度，因为它倒计时backgroundColor将从绿色变为红色... 但是在此动画过程中，我将更新许多状态，并且在每次更新动画过程中会停顿片刻，然后再次运行，这会导致不良的动画效果。我想知道如何获得独立于状态更新的平滑动画吗？

我已经尝试使用“ useNativeDriver：true”，但是它告诉我它将不支持宽度，这给了我错误

请帮助我提供您的建议。谢谢。

定义动画值：

animateTimeBar : new Animated.Value(100),

动画代码：

  _timeBarAnimation = (state,time) => {
    const timeAnimation = Animated.timing(
      this.state.animateTimeBar, {
      toValue: 0,
      duration: time,
      easing: Easing.linear,
      //useNativeDriver:true     
    })
    if(state){
      timeAnimation.start();
    }else{
      timeAnimation.stop();
    }
  }

const animatedTimeBarStyle = {
      width: this.state.animateTimeBar.interpolate({
        inputRange: [0, 100],
        outputRange: ['0%', '100%'],
      }),
      backgroundColor: this.state.animateTimeBar.interpolate({
        inputRange: [0, 100],
        outputRange: ['rgba(227, 7, 69, 1)', 'rgba(25, 200, 57, 1.0)'],
      }),
    }

在渲染中，我有：

<Animated.View style={[styles.inViewLine,animatedTimeBarStyle]}></Animated.View>

React Native中onPanResponderMove和状态更新期间的动画问题

0 个答案: