反应原生panResponder动画

Question

I have a lottie component, which should run with a new animated value each time when you swipe a screen. Now it's increase an animated value to 0.3 when swipe from left to right and decrease to 0 if swipe opposite direction.

What I'm trying to do, is when you swipe a screen again, value should become 0.6. and on third swipe 0.9.

Could you give me an idea how to do it?

 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

Store the value for toValue outside the onPanResponderMove function. On each swipe increase it with 0.3 for the next swipe.

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