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动画

1 个答案: