如何在js中用两个不同的间隔为一个组件设置动画
How to animate a component with two differents intervals in js
我需要在名为 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 函数继续 运行 即使它以 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);
}
我需要在名为 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 函数继续 运行 即使它以 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);
}