Создание плавного индикатора в React - PullRequest
0 голосов
/ 12 декабря 2018

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

class AudioPlayer extends Component {
    constructor(props) {
        super(props)
        this.audio = new Audio(file);
    }
    state = {
        playButton: 'play',
        progress: 0,
    }
    componentDidMount = () => {
        this.currentTimeInterval = null;
        this.slider = 0;
        this.audio.onplay = () => {
            this.currentTimeInterval = setInterval( () => {
                this.slider = (this.audio.currentTime * 100) / this.audio.duration;
                this.setState({progress: this.slider})
            }, 100);
        };
    }
    playAudio = () => {
        if (this.state.playButton === 'play') {
            this.audio.play();
            this.setState({playButton: 'pause'});
        } else {
            clearInterval(this.currentTimeInterval);
            this.audio.pause();
            this.setState({playButton: 'play'});
        }
    }
    render() {
        return(
            <div>
                <button onClick={this.playAudio}><FontAwesomeIcon icon="step-backward" /></button>
                <button onClick={this.playAudio}><FontAwesomeIcon icon={this.state.playButton} /></button>
                <button onClick={this.stopAudio}><FontAwesomeIcon icon="stop" /></button>
                <button onClick={this.playAudio}><FontAwesomeIcon icon="step-forward" /></button>
                <div className="progress-bar" style={{width: this.state.progress + '%'}}></div>
            </div>
        )
    }
}

Это выглядит вполне нормально, когда интервал установлен на 100, но если я изменю его на 500, то полоса не будет двигаться плавно.Я попытался применить следующий код CSS:

.progress-bar {
  background-color: blue;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3 ease;
  transition: width 0.3 ease;
  height: 20px;
}

Но когда интервал установлен на 500, переход CSS не поможет, если я не установлю время по крайней мере 5 с, что не хорошо, потому что этосоздает задержку.

Таким образом, мой вопрос касается производительности - рекомендуется ли использовать интервал 100 или даже меньше?Не влияет ли это на производительность, которую я вызываю повторным рендерингом компонента каждые 100 мс?Мне просто интересно, хорошая ли это практика?

Заранее спасибо

1 Ответ

0 голосов
/ 12 декабря 2018

Попробуйте это.Свойство, которое вы хотите анимировать, должно присутствовать в том же классе.Я надеюсь, что я не получу отрицательный голос:)

.progress-bar {
  width: 0; // try width: 0% if prior one do not work
  background-color: blue;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3 ease;
  transition: width 0.3 ease;
  height: 20px;
}

https://codesandbox.io/s/00qq6yj36w

...