首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
华为云
V2EX  ›  JavaScript

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

  •  
  •   cheroky · 347 天前 · 985 次点击
    这是一个创建于 347 天前的主题,其中的信息可能已经有所发展或是发生改变。

    主要就是想再 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 看到有类似的问题,不知道在实际工作中应该怎么判断动画结束??

    7 回复  |  直到 2017-11-03 18:29:29 +08:00
        1
    jamesliu96   347 天前
    既然 raf 有现有的结束条件,为什么还要 animate_state ?

    进入结束条件之后调用回调一次,不执行 raf,怎么会出现死循环?
        2
    cheroky   347 天前
    @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);
    }
    ```
        3
    jamesliu96   347 天前
    @cheroky 是不是 callback() 之后没 return ?
        4
    cheroky   347 天前
    @jamesliu96 0.0 真的没写 return,试了下可以了!!!但就是不太懂为啥得写 return ?我看 stackoverflow 上也没写 return,误人子弟啊
        5
    jamesliu96   347 天前
    @cheroky 老哥我就看了一眼,猜到应该是这个原因。不 return 就又调用 raf 了啊。
        6
    cheroky   347 天前
    @jamesliu96 是我蠢了蠢了。。。多谢多谢
        7
    erlking   347 天前
    结束条件加 cancelAnimationFrame(bindAnimation); 应该就好了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2294 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 26ms · UTC 12:12 · PVG 20:12 · LAX 05:12 · JFK 08:12
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1