如何基于倒数计时器加速动画？

Question

我的屏幕上有一个按钮，该按钮上有一个不断向左和向右移动的动画，以鼓励用户触摸它。另外，我想有一个倒数计时器，所以当时间减少时按钮动画会加快。 我是这样做的：

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);
   }

但是它不起作用，速度不会改变，并且会一直保持启动速度。

能帮我实现这个目标吗？ 谢谢。