连续调用requestAnimationFrame

我用javascript函数requestAnimationFrame()玩了一下，并且用笔画汉字画家做了this笔画。它工作得很好...代码清洁，认为我的新手。我跟着一个很好的教程here，落在这样的结构：连续调用requestAnimationFrame

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。我是否应该等待第一个动画的结束才能启动下一个动画？我宁愿（更模块化和重复使用），但如何？或者我应该让机器更复杂，以便在同一个动画中为多个角色制作动画？

来源

2015-01-26 yota

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

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

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

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

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

下面是有关使用requestAnimationFrame的计时器上一前一后更详细的代码：

How to control animation speed (requestAnimationFrame)?

来源

2015-01-26 22:09:44 markE

谢谢，我会从你的答案开始，和其他一些人所做。这个问题主要是，我不知道动画部分会花多长时间...如果我能找到一个我很满意的骨架，我会在这里发布:) – yota 2015-01-27 07:06:21

连续调用requestAnimationFrame

回答

相关问题