Джиттер анимация в реакции-родной / реаги-360 - PullRequest
Новая
       20

Джиттер анимация в реакции-родной / реаги-360

0 голосов
/ 24 апреля 2019

Я создаю мобильное приложение, в котором у меня есть несколько указателей карты, в которые вложены кнопки, которые непрерывно подпрыгивают вверх и вниз.При наведении на них курсора изображение меняется, и анимация останавливается.При выходе из парения анимация начинается снова.Проблема заключается в том, что иногда при наведении курсора на кнопку / указатель он мигает между изображением указателя карты и другим изображением, а не просто делает мгновенный переход от одного изображения к другому ... Есть идеи, как это исправить?Вот код, который я использую: 

constructor(props) {
    super();

    this.state = {

      animationValue: new Animated.Value(1.5),
      pointerEntered: false,
      pointerImg: 'pointer.png',


    };
  }

componentDidMount(){
 this.animation();
}


animation(){

    if(!this.state.pointerEntered){

      Animated.sequence([
        Animated.timing(
          this.state.animationValue,
          {
            toValue: 1.5,
            duration: 1000
          }
        ),
        Animated.timing(
          this.state.animationValue,
          {
            toValue: 1.65,
            duration: 1000,
            easing: Easing.elastic(0)
          }
        )
      ]).start(()=> {
        this.animation();
      });
    } 

  }


onPointerEnter = () => {
    this.setState({pointerEntered: true, pointerImg: 
    'reserve_table2.png', bookingTextOpacity: 100})

  }


onPointerExit = () => {
    Promise.resolve(this.setState({pointerEntered: false, pointerImg: 
    'pointer.png', bookingTextOpacity: 0}))
    .then(() => {
      this.animation()
    })
  }
...