Реагировать на нативную анимацию panResponder - PullRequest
Новая
       23

Реагировать на нативную анимацию panResponder

1 голос
/ 12 марта 2019

У меня есть компонент 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>
  )
}

1 Ответ

0 голосов
/ 12 марта 2019

Сохраните значение для 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();
    }
}
...