хранения requestAnimationFrame

Question

Краткое объяснение:

Я сделал requestAnimation, который в качестве альтернативы имеет 2 обратных вызовов в зависимости от счетчика;

один из обратных вызовов будет увеличивать счетчик, а другой уменьшит его (всегда зацикливаясь внутри определенного диапазона 0 // arr.length).

Все работает, как не ожидается до остановки и перезапуска анимации,
это код, который активирует и должен Хранить requestAnimationFrame (click()):

function start() { 
     if (!spiral) { 
      spiral = window.requestAnimationFrame(animation); 
     } 
    } 

function click() { 
     if (spiral) { 
      var trackSpiral = spiral; 
      spiral = undefined; 
      window.cancelAnimationFrame(spiral); 

     } else { 

      spiral = trackSpiral; 
    /* (count > precedingCount || count == 0) ? 
        spiral = requestAnimationFrame(animation) : 
        spiral = requestAnimationFrame(animationReverse);*/    
     } 
    } 
     window.addEventListener('load', start) 

     window.addEventListener('click', click) 

В качестве обходного пути я использовал precidingCount var и в зависимости от того, будет ли он увеличиваться или нет, он может решить, какой запрос обратного вызова RequestAnimationFrame должен срабатывать;

Вопросы:

Может кто-нибудь объяснить, почему просто хранить и ссылаясь на var назначенную requestAnimation не работает, как я ожидал?

Есть ли лучший шаблон для остановки-перезагрузки requestAnimation?

here's a working pen (чтобы увидеть выпуск строки комментариев от 180 до 182) _

Answer 1

После каждого клеща, вы должны повторный запрос анимация кадра. requestAnimationFrame - это не что-то вроде setInterval, которое нужно отменить.

var animating = false; 

function tick() { 
    if (!animating) return; 
    animate();       // do one step of animation 
    window.requestAnimationFrame(tick); // request next frame 
} 

function click() { if (animating = !animating) tick(); } 

window.addEventListener('load', click); 
window.addEventListener('click', click); 

Answer 2

Может кто-нибудь объяснить, почему просто хранить и вспоминая вар назначены requestAnimation не работает, как я ожидал?

Вы должны объявить var вне функции, если var объявлен только в функции, тогда он ограничен этой областью.

Есть ли лучший шаблон для остановки повторного запросаAnimation?

Вам необходимо остановить/запустить, просто не запрашивать следующий кадр. для случаев, когда существует бесконечный цикл, вы можете использовать cancelAnimationFrame;

(function rAF(){ 
    // animate .... call again 
    rAF_id = window.requestAnimationFrame(rAF) 
}(); 
// .. wait ... cancel 
setTimeout(window.cancelAnimationFrame(rAF_id), 5000) 

Следующий код должен начинаться forwardAnimation, остановить forwardAnimation, начать reverseAnimation, остановить reverseAnimation и повторить.

(function(callback1, callback2, animating) { 

    callback = callback1; 

    function click() { 
    if (animating = !animating) { 
     callback = callback !== callback1 ? callback1 : callback2; 
     (function loop() { 
     rAF = window.requestAnimationFrame(loop); 
     callback(); 
     })(); 
    } else { 
     window.cancelAnimationFrame(rAF); 
    } 
    } 

    window.addEventListener("load", function load() { 
    click(); 
    window.removeEventListener("load", load); 
    window.addEventListener('click', click); 
    }); 
}(forwardAnimation, reverseAnimation)); 

Working Example

SVG Vertigo (незаконченный)