React本地Panresponder动画

Question

我有一个Lottie组件，当您刷新屏幕时，该组件每次都应以新的动画值运行。现在，当从左到右滑动时，它将动画值提高到0.3，如果方向相反，则将动画值增加到0。

我要做的是，当您再次刷屏幕时，值应变为0.6。并在第三次滑动0.9。

你能给我一个想法吗？

 onPanResponderMove: (evt, gesture) => {
const { dx } = gesture;
if (dx > 30) {
   Animated.timing(this.state.scrollX, {
      toValue: 0.3,
      duration: 500,
    }).start();
  } else {
    Animated.timing(this.state.scrollX, {
      toValue: 0,
    }).start();
  }
}
render(){
  return(
    <View>
    <LottieView
          style={styles.lottie}
          source={require('../../assets/lottie/auth_animation.json')}
          progress={this.state.scrollX}
        />
    </View>
  )
}

Answer 1

在OnpanResponderMove函数外存储Tovalue的值。在每次滑动时，下一次滑动都会增加0.3。

toValue = 0;
onPanResponderMove: (evt, gesture) => {
    const { dx } = gesture;
    if (dx > 30) {
        toValue += 0.3;
        Animated.timing(this.state.scrollX, {
            toValue,
            duration: 500,
        }).start();
    } else {
        Animated.timing(this.state.scrollX, {
            toValue: 0,
        }).start();
    }
}