Как анимировать компонент с двумя разными интервалами в js - PullRequest
Новая
       29

Как анимировать компонент с двумя разными интервалами в js

0 голосов
/ 12 февраля 2019

Мне нужно анимировать рот на компоненте с именем персонажа.То, что я хочу сделать, это использовать состояние с именем 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 продолжает работать, даже если она вызывается с интервалом в 2 секунды, за исключением остановки анимации и ее перезагрузки

1 Ответ

0 голосов
/ 12 февраля 2019
  1. Прекратите делать привязку непосредственно в setInterval, вместо этого сделайте это в конструкторе.Что происходит, так это то, что он создает новую функцию каждый раз, когда срабатывает setInterval, что не очень хорошо.Поэтому удалите привязки.
  2. Все ваши функции являются функциями стрелок, поэтому привязка не требуется
  3. Очистите предыдущий таймер перед выполнением 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);
 }
...