Question

我使用名为requestAnimationFrame()的javascript函数播放了一些内容，并通过中风汉字画家制作了this笔画。它运作良好......代码足够干净，被认为是我的新手。我按照了一个很好的教程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();
}

然而，我想扩展这个，并在第一个旁边画一些更多的kanjis。我应该等待第一个动画的结束才能启动下一个动画吗？我更喜欢（更多模块化和重复使用），但如何？或者我应该让机器更复杂，以便为同一动画中的多个角色制作动画？

Answer 1

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

如果你有多个以不同时间运行的动画，那么你可以利用自动输入每次通话的时间。

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

通过这种方式，您可以灵活地连续或连续地运行每个动画，而不会增加“机器”的复杂性。

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

以下是有关在之前帖子中使用requestAnimationFrame的计时器的更详细代码：

How to control animation speed (requestAnimationFrame)?

连续调用requestAnimationFrame

1 个答案: