如何在js中为具有两个不同间隔的组件设置动画_JavaScript

我需要在名为 character 的组件上制作嘴巴动画。 我想要做的是使用名为 openned 的状态来处理我的嘴巴状态。

我需要每 2 秒运行一次嘴巴动画，以允许角色间隔说话。 这个想法是在下面显示文本，只有当文本出现时嘴巴才必须移动。

 state = {
openned : false
 }

  handleMouthState = () => {
this.setState({
  openned : ! this.state.openned
});
  }

  animeMouth = () => {
setInterval(this.handleMouthState.bind(this), 100);
  }

  animMouthWithInterval = () => {
setInterval( this.animeMouth.bind(this), 2000 );
  }

  componentDidMount() {
  setTimeout( this.animMouthWithInterval.bind(this) , 6000);
  }

这是我试过的代码，它运行良好，除了 animMouth func 继续运行，即使它以 2 秒的间隔调用，我除了停止动画然后重新加载它

不要直接在 setInterval 中进行绑定，而是在构造函数中进行绑定。 发生的情况是每次触发 setInterval 时它都会创建一个新函数，这并不好。 所以删除绑定。
您的所有函数都是箭头函数，因此不需要绑定
在执行 setInterval 之前清除上一个计时器

这是更新的代码

   state = {
       openned : false
   }

   handleMouthState = () => {
       this.setState({
          openned : ! this.state.openned
       });
   }

  animeMouth = () => {
       if(this.mouthInterval){
             clearInterval(this.mouthInterval);
       }
       this.mouthInterval = setInterval(this.handleMouthState, 100);
  }

 animMouthWithInterval = () => {
     if(this.animeInterval){
             clearInterval(this.animeInterval);
       }
     this.animeInterval = setInterval( this.animeMouth, 2000 );
 }

 componentDidMount() {
     setTimeout( this.animMouthWithInterval,  6000);
 }

如何在js中为具有两个不同间隔的组件设置动画

问题描述

1楼