@Pumba8897

Как лучше реализовать анимацию текста в React?

Нужно сделать анимацию текста, с автоматическиой печатью. Суть в том что есть часть текста статичная и вторая часть динамически меняется (поочередно печатаются и удаляются несколько вариантов). Реализовал это с помощью SetTimeout. Во время рендера в зависимости от условия меняется стейт с задержкой.
Вся проблема в том что при определенных действиях на сайте (прокрутка на моб. или открытие меню) анимация начинает дико ускоряться.
Не понимаю в чем проблема.

export default class AutoType extends React.Component {
    constructor() {
        super();
        this.state = {
            mainText: 'Учитесь онлайн',
            supplText: [
                'тому, что нужно',
                'на индивидуальных занятиях',
                'с классными преподавателями',
                'на удобной платформе',
                `через приложение в\u00A0смартфоне`
            ],
            countMain: 0,
            countSuppl: 0,
            supplNum: 0,
            isDeleting: false
        };
        this.writer = null;
    }

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

    render() {
        let timer = (Math.random() * 100).toFixed(0);
        let nextString = false;

        if (this.state.supplText[this.state.supplNum].length > 20) {
            nextString = true;
        } else if (this.state.supplText[this.state.supplNum].length < 20) {
            nextString = false;
        }

        if (this.state.countSuppl === this.state.supplText[this.state.supplNum].length) {
            timer = 2500;
        }
        if (this.state.isDeleting) {
            timer = 20;
        }

        this.writer = setTimeout(() => {
            if (this.state.isDeleting && this.state.countSuppl > 0) {
                this.setState({
                    countSuppl: this.state.countSuppl - 1
                });
            } else if (
                this.state.isDeleting &&
                this.state.countSuppl === 0 &&
                this.state.supplNum < this.state.supplText.length - 1
            ) {
                this.setState({
                    supplNum: this.state.supplNum + 1,
                    isDeleting: false
                });
            } else if (this.state.countSuppl < this.state.supplText[this.state.supplNum].length && !this.state.isDeleting) {
                this.setState({
                    countSuppl: this.state.countSuppl + 1
                });
            } else if (this.state.countSuppl >= this.state.supplText[this.state.supplNum].length) {
                this.setState({
                    isDeleting: true
                });
            } else if (this.state.supplNum === this.state.supplText.length - 1 && this.state.countSuppl === 0) {
                this.setState({
                    countMain: 0,
                    supplNum: 0,
                    isDeleting: false
                });
            }
        }, timer);

        return (
            <ResultString
                nextString={nextString}
                mainText={this.state.mainText}
                secondText={this.state.supplText[this.state.supplNum].substr(0, this.state.countSuppl)}
            />
        );
    }
}
  • Вопрос задан
  • 220 просмотров
Пригласить эксперта
Ответы на вопрос 1
hzzzzl
@hzzzzl
componentWillUnmount() {
        clearInterval(this.writer);
    }


может потому что тут имелся в виду clearTimeout, а иначе таймаут не очищается и их накапливается несколько?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы