Я пишу приложение VR, используя React VR, и сделаю кнопки взгляда с индикатором выполнения (или что-то в этом роде), чтобы показать пользователю, как долго он должен смотреть на эту кнопку. Как я мог это сделать?
Я думаю использовать этот псевдокод (может быть, в этом коде есть какие-то ошибки):
constructor(props) {
super(props);
this.state = {
watchTime: 3,
progress: 0,
watching: true
};
}
render() {
return (
<VrButton onEnter={ () => this.animateProgress() }
onExit={ () => this.stopProgress() }
onClick={ ()=> this.click() }></VrButton>
);
}
animateProgress() {
this.setState({watching: true});
while (this.state.watchTime >== this.state.progress && this.state.watching === true) {
// after a timeout of one second add 1 to `this.state.progress`
}
this.click();
}
stopProgress() {
this.setState({
progress: 0,
watching: false
});
}
click() {
// Handels the click event
}
Есть ли более простой способ сделать это?