Блог

У меня на экране есть кнопка с анимацией движения, которая постоянно перемещается вправо и влево, чтобы побудить пользователя прикоснуться к ней. Кроме того, я хочу иметь таймер обратного отсчета, чтобы при уменьшении времени анимация кнопки ускорялась. Я сделал это :

 
constructor(props) {
      super(props);      
      this.state = {
        timer : 1000,      
        animateBtnOnTime : new Animated.Value(1),
      };
  }

const ButtonAnimation =
      Animated.loop(
        Animated.timing(
          this.state.animateBtnOnTime,
          {
            toValue: 2,
            friction: 1,
            tension: 1,
            duration: this.state.timer
          }
        )
      );

componentDidMount(){
    this._runAnimation();
    this.interval = setInterval(
      () => this.setState((prevState)=> ({ timer: prevState.timer - 100 })),
      1000
    );
  }

 componentDidUpdate(){
    if(this.state.timer === 100){ 
      clearInterval(this.interval);
    }
  }

  componentWillUnmount(){
    clearInterval(this.interval);
   }

  

Но это не сработает, скорость не изменится, и она продолжает работать с начальной скоростью.

не могли бы вы, пожалуйста, помочь мне достичь этого? Спасибо.