последователей вызывает запросAnimationFrame

Question

Я немного сыграл с функцией javascript под названием requestAnimationFrame() и сделал this инсульт инсульта kanji. Он хорошо работает ... код достаточно чистый, считается моей новичком. Я последовал хороший учебник 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

Используйте один запросAnimationFrame для управления всеми вашими анимациями.

Если у вас есть несколько анимаций, которые запускаются с разными таймингами, вы можете использовать прошедшее время, которое автоматически подается на каждый звонок.

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

Таким образом, у вас есть гибкость работы каждого из анимации последовательно или последовательно без увеличения сложности вашей «машины».

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

Вот более подробный код об использовании таймера requestAnimationFrame на предыдущем посте:

How to control animation speed (requestAnimationFrame)?