连续调用 requestAnimationFrame

Question

我玩了一下名为 requestAnimationFrame() 的 javascript 函数，制作了 this stroke by stroke kanji painter. It works well... the code is clean enough, considered my newbie-ness. I followed a nice tutorial here 并落在了这样的结构上：

function here_a_closure() {
    var some_state = 0;
    var last_frame = false;

    function machinery() {
        // do mysterious stuff
        return last_frame;
    }

    function frame_display() {
        handle = window.requestAnimationFrame(frame_display);
        if (machinery()) {
            window.cancelAnimationFrame(handle);
        }
        // do the display
    }
    frame_display();
}

不过，我想扩展这个，在第一个旁边再画一些汉字。我应该等第一个动画结束后再启动下一个吗？我更喜欢（更多的模块化和重用），但如何？或者我应该使机器更复杂以在同一动画中制作多个角色的动画吗？

Answer 1

使用单个 requestAnimationFrame 驱动所有动画。

如果您有多个运行具有不同时间的动画，那么您可以利用自动输入每个调用的经过时间。

function animate(time){
    requestAnimationFrame(animate);
}

这样您就可以灵活地运行连续或连续地设置每个动画，而不会增加 'machinery' 的复杂性。

if(time>doSomethingOnAnimation1whenThisTimeElapses){ ... }
if(time>doSomethingOnAnimation2whenThisTimeElapses){ ... }
if(time>doSomethingOnAnimation3whenThisTimeElapses){ ... }

这里有一个更详细的代码，关于在之前的 post 上使用 requestAnimationFrame 的定时器：

How to control animation speed (requestAnimationFrame)?

连续调用 requestAnimationFrame

consecutives calls to requestAnimationFrame

javascript

requestanimationframe