анимация не останавливается при переключении между вкладками браузера

Question

Я новичком в HTML5 и в основном используя структуру коды, сходную с найденной здесь http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/

По словам Пола ирландцев анимации приостанавливается автоматически при переключении между вкладками при requestAnimationFrame() используется

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

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

http://jsfiddle.net/wMkJg/

Как я могу изменить код так, чтобы анимация не продолжается на вкладке коммутаторе?

function animate(lastTime, myRectangle, runAnimation, canvas, context) { 

       if(runAnimation.value) { 
        // update 
        var time = (new Date()).getTime(); 
        var timeDiff = time - lastTime; 

        // pixels/second 
        var linearSpeed = 100; 
        var linearDistEachFrame = linearSpeed * timeDiff/1000; 
        var currentX = myRectangle.x; 

        if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth/2) { 
        var newX = currentX + linearDistEachFrame; 
        myRectangle.x = newX; 
        } 

        // clear 
        context.clearRect(0, 0, canvas.width, canvas.height); 

        // draw 
        drawRect(myRectangle, context); 

        // request new frame 
        requestAnimFrame(function() { 
        animate(time, myRectangle, runAnimation, canvas, context); 
        }); 


     } 
} 

Answer 1

Поведение rAF не определено. В некоторых браузерах это может пауза, в других это может уменьшить частоту кадров и т. Д., Но это не определено стандартом.

Вы можете использовать фокус и размытия события на окно, чтобы установить флаг ваш цикл может использовать:

var isPaused = false; 

window.onblur = function() { 
    isPaused = true; 
} 
window.onfocus = function() { 
    isPaused = false; 
    animate(...);  /// start the loop (or use rAF here too) 
} 

, а затем в цикле:

requestAnimFrame(function() { 
    if (!isPaused) animate(time, myRectangle, runAnimation, canvas, context); 
});