用 requestAnimationFrame 写动画发现有些问题想请教一下各位

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2581 天前的主题，其中的信息可能已经有所发展或是发生改变。

主要就是想再 rAF 之后调用其它的函数，开始感觉很简单，但是一写发现不会。。最刚开始的想法 callback 放在 rAF 的结束条件中发现会死循环。我想着按照回调队列，能不能让一个函数始终在队列末尾，然后我现在解决办法是动画完了进入结束条件之后会改变一个状态变量然后 return，然后写一个判断函数放入 setTimeout()，判断函数如下：

engageToWhere(shelf,cb) {
        this.animate_state = "ANIMATE";
        //...
        this._animation(targetY,diff>=0?0:1); //动画
        function checkIfIdle() {
            if (self.animate_state==='ANIMATE') {
                setTimeout(checkIfIdle,0);
            } else {
                cb();
            }
        }
        checkIfIdle();
        
    }

虽然功能是实现了，但是觉得实现方法有待商榷，百度了很久也没有说关于这个的事情，只在 stackoverflow 看到有类似的问题，不知道在实际工作中应该怎么判断动画结束？？

函数

动画

raf

setTimeout

7 条回复 • 2017-11-03 18:29:29 +08:00

jamesliu96

2017-11-03 17:00:31 +08:00

既然 raf 有现有的结束条件，为什么还要 animate_state ？

进入结束条件之后调用回调一次，不执行 raf，怎么会出现死循环？

cheroky

2017-11-03 17:09:11 +08:00

@jamesliu96 我也觉得奇怪，可能是我方法有点问题，我把_animation 贴出来

```
_animation(target,direction) {
var top = this.entity.offsetTop;
//console.log(top,target,direction);
if(direction) {
top-=18;
} else {
top++;
}
if((!direction && top>=target) || (direction && top<=target)) {
this.animate_state = "IDLE";
return;
//callback() 在这死循环
}
var bindAnimation = this._animation.bind(this,target,direction);

this.entity.style.top = top+'px';
requestAnimationFrame(bindAnimation);
}
```

jamesliu96

2017-11-03 17:20:33 +08:00

@cheroky 是不是 callback() 之后没 return ？

cheroky

2017-11-03 17:34:28 +08:00

@jamesliu96 0.0 真的没写 return，试了下可以了！！！但就是不太懂为啥得写 return ？我看 stackoverflow 上也没写 return，误人子弟啊

jamesliu96

2017-11-03 17:36:35 +08:00

@cheroky 老哥我就看了一眼，猜到应该是这个原因。不 return 就又调用 raf 了啊。

cheroky

2017-11-03 17:38:52 +08:00

@jamesliu96 是我蠢了蠢了。。。多谢多谢

erlking

2017-11-03 18:29:29 +08:00

结束条件加 cancelAnimationFrame(bindAnimation); 应该就好了