反应本机 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

将 toValue 的值存储在 onPanResponderMove 函数之外。在每次滑动时将其增加 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();
    }
}

反应本机 panResponder 动画

React native panResponder Animation

animation

reactjs

react-native

react-animated